Skip to main content

CSS Selectors: Most Used Selectors Explained

· 3 min read
Parth Maheta

CSS (Cascading Style Sheets) selectors are the backbone of styling in web development. They allow you to precisely target HTML elements and apply styles to create visually appealing and responsive websites. In this comprehensive guide, we'll delve into the world of CSS selectors, exploring their types, combinators, and advanced features.

Understanding CSS Selectors​

1. Basic Selectors​

Universal Selector *​

The universal selector selects all elements on a page. It can be used to apply styles globally.

* {
  margin: 0;
  padding: 0;
}

Type Selector (Element Selector)​

Selects all instances of a specific HTML element.

p {
  color: #333;
}

Class Selector .​

Selects elements with a specific class attribute.

.button {
  background-color: #3498db;
  color: #fff;
}

ID Selector #​

Selects a specific element with a matching ID attribute.

#header {
  font-size: 24px;
}

2. Attribute Selectors​

Attribute Equals Selector [attribute=value]​

Selects elements with a specific attribute value.

input[type="text"] {
  border: 1px solid #ccc;
}

Attribute Contains Selector [attribute*=value]​

Selects elements with an attribute containing a specific value.

a[href*="example.com"] {
  color: #ff5733;
}

3. Pseudo-classes​

Pseudo-classes select elements based on their state or position.

Hover Pseudo-class :hover​

Selects an element when the user hovers over it.

a:hover {
  text-decoration: underline;
}

First Child Pseudo-class :first-child​

Selects the first child of a parent element.

li:first-child {
  font-weight: bold;
}

4. Combinators​

Combinators are used to define relationships between different selectors.

Descendant Combinator (Space)​

Selects all descendants of a specified element.

article p {
  font-style: italic;
}

Child Combinator >​

Selects all direct children of a specified element.

ul > li {
  list-style-type: square;
}

Adjacent Sibling Combinator +​

Selects an element that is a direct sibling to another element.

h2 + p {
  margin-top: 10px;
}

General Sibling Combinator ~​

Selects all siblings of an element.

h3 ~ p {
  color: #666;
}

5. Pseudo-elements​

Pseudo-elements select and style a part of an element.

First Line Pseudo-element ::first-line​

Selects the first line of a text.

p::first-line {
  font-weight: bold;
}

First Letter Pseudo-element ::first-letter​

Selects the first letter of a text.

p::first-letter {
  font-size: 150%;
  color: #900;
}

Advanced Selectors​

1. :not() Pseudo-class​

The :not() pseudo-class selects elements that do not match a specified selector.

li:not(.special) {
  color: #333;
}

2. :nth-child() Pseudo-class​

The :nth-child() pseudo-class selects elements based on their position in the parent.

li:nth-child(even) {
  background-color: #f2f2f2;
}

3. :nth-of-type() Pseudo-class​

Similar to :nth-child(), but selects elements based on their type.

p:nth-of-type(3n) {
  color: #ff5733;
}

4. :focus Pseudo-class​

The :focus pseudo-class selects an element when it is in focus.

input:focus {
  border: 2px solid #3498db;
}

Conclusion​

CSS selectors are a powerful and flexible tool for styling web pages. Whether you're a beginner or an experienced developer, understanding the variety of selectors and how to use them efficiently is crucial for creating well-designed and responsive websites. By mastering the art of selecting and styling HTML elements, you'll have the skills to bring your design visions to life on the web.