Journey through CSS Selectors

If you are here, I assume you already know what CSS stands for. CSS selectors are just some conditions to select elements on the page. I will directly jump to the point. Revisiting the CSS rule syntax:

some-selector { property: value; }

List of CSS concepts you need to understand to master CSS selectors

• All or Universal selector
• Element / Type selector
• Attribute selector
• Id selector
• Class selector
• Pseudo class selector
• Pseudo element selector
• Combinators

1. Universal selector:

All selector is the most simple one. You provide a style and it will be applied to all the elements selected.

* {
color: red;
}

2. Type selector:

Type selector selects elements by their type. Eg:

// Css
div {
  color: red;
}

Example-

<div> This will be selected by 'div' selector </div>
<div> 
  This one will also be selected 'div' selector
  <div> This one will also be selected by 'div' selector </div>
  Even this one selected by 'div' selector
</div>
<p> But this one won't be selected by 'div' selector </p>

3. Attribute selector:

Attribute selector works on HTML attributes. It selects elements with matching attributes.

// Css
[id="some-id"] {
  color: red;
}
[class="some-class"] {
  color: green;
}

Example-

<div id="some-id"> 
  This will be selected by '[id="some-id"]' as this element has the id     attribute with 'some-id' value 
</div>
<div class="some-class"> 
  This one will also be selected by '[class="some-class"]' attribute selector
</div>
</div>

4. Id selector:

We already discussed how we can use attribute selectors to style id and classes. Now we are going to see the easy id selector which allows selecting an element with a given id.

// syntax for a id selector is following:
// #id-name { property: value; }

// Example
#some-id {
 color: red;
}
// html
<div id="some-id"> This will be shown in red </div>

5. Class selector:

Similar to the id selector class selector provides an easy API to select elements with a class.

// syntax for class selector
// .some-class-name { property: value; }
// Example
.some-class {
 color: blue;
}
// html
<div class="some-class"> This text is blue. </div>

6. Pseudo class selector:

The pseudo-class selector allows to select an element is a special state, like while the element is being hovered or the element is active or focused, etc. To make it simple selecting an element in a particular state means the styles will be applied when that element is in the given state.

// syntax for pseudo-class selector
selector:state {
  property: value;
}
// following css rule are applied when a tag will be hovered over.
p:hover {
  color: red;
}

Some of the most frequent used states are listed below:

• hover: Selects the elements when it hovers.
• focus: Selects the element which has the focus.
• disabled: Selects disabled element.
• first-child: Selects the first child element of the selector
• last-child: Selects the last child element of the selector
• visited: Used with links tag, selects all the visited links.

7. Pseudo element selector:

These selectors are used to style (or select) a specific part of an element.

// syntax
selector::some-pseudo-element {
  property: value;
}
// Note the difference in syntax with pseudo-class selector

Listing all the pseudo-elements:

• after: Used to insert & style content after a given element.
• before: Used to insert & style content before a given element.
• first-letter: Selects the first letter of a given selector.
• first-line: Selects the first line of a given selector.
• selection: Selects the content selected by a user.

8. Combinators

All of the above selectors are good. But they are simple, you are limited. But now, the power is coming to you with combinators. You can combine more than one selectors and create a hybrid selector. They are pretty much as the conjunctions in English.

// Syntax
selector1 some-combinator selector2 {
  property: value;
}
// following selector selects p element which are descendants of a div. Or p elements nested inside a div.
div p {
  color: red;
}

There are four types of combinators in CSS:

• descendant selector (space): Selects everything matched by selector2 which are descendant of selector1 or nested inside selector1.
• child selector (>): Selects everything matched by selector2 which are direct children of selector1.
• adjacent sibling selector (+): Selects selector2 which are direct adjacent sibling of selector1.
• general sibling selector (~): Selects selector2 which are a sibling of selector1. Let's see some examples now.

// descendant selector:
div p {
 color: red;
}
<div>
  <p> This will be red </p>
  <p> I am also red </p>
  <section>
   <p> I am also red </p>
   <div>
     <p> I am also red </p>
   </div>
  </section>
</div>

// child selector
div > p {
  color: red;
}
<div>
  <p> This will be red </p>
  <p> I am also red </p>
  <section>
   <p> I am not red, as I am not direct children of a div</p>
   <div>
     <p>
       Yes, I am red. Check my parent if you don't believe. I am red only because of my immediate parent div.
     </p>
   </div>
  </section>
</div>

div + p {
  color: red;
}
<div>
  <p> I am not red</p>
  <p> I am also not red </p>
  <section>
   <p> Yes, I am red, I have an immediate div as a sibling</p>
   <div>
     <p> I am also not red </p>
   </div>
   <p> I am red again because of my adjacent sibling div </p>
   <p> But I am not red as you may have already guessed </p>
  </section>
  <div> P below will be red </div>
  <p> Yes, I am red </p>
</div>

div ~ p {
  color: red;
}
<div>
  <p> This won't be red </p>
  <p> I am also not red </p>
  <section>
   <p> I am red </p>
   <div>
     <p> I am not red </p>
   </div>
   <p> I am red as well. </p>
   <p> Surprise! I am also red. I am red because I am sibling of a div.
   </p>
   <p> Me too </div>
  </section>
  <p>
   If you add a div at same level as of me all, I will also be red along with first two p above.
  </p>
</div>