DEV Community

Cover image for Mastering CSS & CSS3 Selectors in 2022.
Akash Kadlag
Akash Kadlag

Posted on

Mastering CSS & CSS3 Selectors in 2022.

#css #webdev #beginners #tutorial

Save time searching for the CSS selectors.

This blog will look at the different types of CSS selectors and how we can use them to build efficient CSS code.

Prerequisite

To get the most out of this article, we need the following:

  • Basic understanding of HTML.
  • Visual studio code or any IDE of our choice to code along.

CSS Selectors

CSS selectors are the opening part of a CSS ruleset. CSS Selectors are used to targeting specific elements on the web page.

CSS selectors are case-sensitive. They must match element names and attribute values precisely.
For Example,
.logo class selector is not the same as .LOGO.

It is advisable to use small letters to avoid making mistakes.

The syntax for CSS Selector is:

selector {
   CSS-property: value;
}
Enter fullscreen mode Exit fullscreen mode

Types of CSS Selectors

  • Basic Selectors
  • Combination Selectors
  • Attribute Selector
  • Pseudo Element Selector
  • Pseudo Class Selector

Basic CSS Selectors

Basic CSS selectors are the most common type of CSS selectors. They style specific elements on a website. In basic selectors, we have selectors such as:

Universal Selector

I refer to this selector as the god selector, the mother of all selectors, one selector to rule them all. That is how powerful it is.

The universal selector selects every tag on the page so we can style every tag or element with one rule.

The asterisk (*) character represents Universal selectors.

The syntax for Universal Selector is:

* {
  CSS-Property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Universal Selector:

* {
  margin: 0;
  padding: 0;
  outline: 0;
}
Enter fullscreen mode Exit fullscreen mode

In the above ⬆️ example, we override the default styling applied by browsers.

Element Type Selector

Type Selectors are the most common basic CSS selectors. They select HTML elements based on the element name.

The Element type selector selects all instances of a tag or element on a page.

The syntax for Element Type Selector is:

element {
   property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Element Type Selector:

p {
  text-align: center;
  font-size: 20px; 
}
Enter fullscreen mode Exit fullscreen mode

In the above ⬆️ example, all paragraph <p> elements will align to the center, and have a font size of 20px.

However, here is how it will look on a webpage:

View original code in Codepen.

Class Selector

The class selector is probably the most useful and versatile selector. The class selector is best used when you want to reuse a style for multiple elements.

To select elements with a specific class, write a period (.) character, followed by the class name.

The syntax for Class Selector is:

.class-name {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Class Selector:

In the example below ⬇️ the <p> element has a class="text"

  <p class="text">Text goes here....</p>
Enter fullscreen mode Exit fullscreen mode

To select the <p> element using the CSS class selector, we:

.text {
  text-align: center;
  font-size: 20px; 
  color: skyblue;
}
Enter fullscreen mode Exit fullscreen mode

All HTML element with class="text" will align to the center, have blue text color and a font-size of 20px.

However, here is how it will look on a webpage:

View original code in Codepen.

ID Selector

ID attributes are specific to one element only. The ID selector identifies an element based on its ID attribute.

To select an element with a specific ID, write a hash (#) character, followed by the element's ID.

This selector is the most powerful in terms of CSS Specificity.

The syntax for ID Selector is:

#id-name {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of ID Selector:

In the example below ⬇️, the <p> element has an id="tagline"

<p id="tagline">Tagline goes here....</p>
Enter fullscreen mode Exit fullscreen mode

To select the <p> element using the ID selector, we:

#tagline {
  text-align: center;
  font-size: 25px;
  font-style: italic; 
  color: red;
  letter-spacing: 2px;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the HTML element with id="tagline".

However, here is how it will look on a webpage:

View original code in Codepen.

Use ID selectors rarely and only on elements that need always to appear the same.

Combination CSS Selectors

Combination Selectors select elements based on a specific relationship between them. In Combination selectors, we have selectors such as:

Descendant Selector

Descendant selectors match all elements that are descendants of a specified element. Descendant selectors select the children, grandchildren, etc., when used.

It uses the white space as a separator between the elements.

The syntax for Descendant Selector is:

selector1 selector2 {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Descendant Selector:

In the example below ⬇️, the <div> element has multiple nested <p> elements.

<div>
<p>Paragraph 1</p>
<p>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
</p>
<p>Paragraph 3</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To select all <p> elements using the descendant selector, we use:

div p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: teal;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <p> child elements of <div>.

However, here is how it will look on a webpage:

View original code in Codepen.

Direct Child Selector

Direct Child Selector selects all the specified direct children of the parent.

Like a descendant selector, the direct child selector is for selecting child elements. Still, the main difference is the direct child selector will only select an element that is the direct child of the first parent selector.

We use the greater-than sign (>) character to represent a child selector.

The syntax for Direct Child Selector is:

Parent-selector > Child-selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Direct Child Selector:

In the example below ⬇️, the <div> element has multiple nested <p> elements.

<div>
  <p>Paragraph 1</p>
  <span>
    <p>Paragraph 2.1</p>
    <p>Paragraph 2.2</p>
  </span>
  <p>Paragraph 3</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To select all <p> elements using the direct child selector, we use:

div > p {
  text-align: center;
  font-size: 20px;
  font-style: italic; 
  color: lightgreen;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the only <p> elements that are a direct child of <div>.

However, here is how it will look on a webpage:

View original code in Codepen.

Adjacent Sibling Selector

The Adjacent sibling selects an element directly after another specific element.

In other words, this selector selects the elements that follow and share the same parent. They must immediately follow each other.

The tilde (+) character represents adjacent sibling selectors.

The syntax for Adjacent Sibling Selector is:

first-sibling-selector + second-sibling-selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

The second sibling element comes after the first sibling element and it's the targeted element. The targeted element is the element you intend to style.

Example of Adjacent Sibling Selector:

In the example below ⬇️ the <div> element has <p> elements and <ul> elements that consist of multiple <li> elements.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To select <li> that comes immediately after <li> element of class="red" using the general sibling selector, we use:

li.red + li {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the ltem 3.

However, here is how it will look on a webpage:

View original code in Codepen.

General Sibling Selector

General Sibling Selector selects all specified HTML elements that are placed after another specified element and they must be children of the same parent element.

In other words, this selector selects the elements that follow and share the same parent. It is not necessary that the second element immediately follows the first element.

The tilde (~) character represents general sibling selectors.

The syntax for General Sibling Selector is:

first-sibling-selector ~ second-sibling-selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

The second sibling element comes after the first sibling element and it's the targeted element. The targeted element is the element you intend to style.

Example of General Sibling Selector:

In the example below ⬇️ the <div> element has <p> elements and <ul> elements that consist of multiple <li> elements.

<div>
  <p>Paragraph 1</p>
  <ul>
    <li>Item 1</li>
    <li class="red">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Paragraph 2</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To select all <li> that comes after <li> element of class="red" using the general sibling selector, we use:

li.red ~ li {
  background: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to only ltem 3 and Item 4.

However, here is how it will look on a webpage:

View original code in Codepen.

Or Selector

Or selector allows us to select multiple elements with different selectors at once and style them. This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list.

It reduces the time of writing same code for multiple times for similar elements.

Note : When you group selectors in this way, If any selector is invalid the whole rule will be ignored.

The syntax for Or Selector is:

selector1, selector2, ... {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Or Selector:

Suppose we need to apply border-radius to .btn-primary and .btn-secondary

Instead of doing this:

.btn-primary{ 
  border-radius : 3px;  
}
.btn-secondary{
  border-radius : 3px;
}
Enter fullscreen mode Exit fullscreen mode

Use Or selector :

.btn-primary, .btn-secondary {
  border-radius : 3px;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to both <button> elements having class of "btn-primary" and "btn-secondary".

However, here is how it will look on a webpage:

View original code in Codepen.

And Selector

Sometimes we want to use specific elements for styling. Here, the selector comes into action.

Suppose we have <p> element and <a> element having the same class = "img" and we have to specify that a class should affect only an HTML <p> element, then we use And Selector.

And Selector Select elements that match all the selector combinations

Example of ID Selector:

In the example below ⬇️ the <p> and <a> element has a class="img"

<img src="./images/image.jpg" class= "img"/>
<p class="img">Description of Image....</p>
<a href="http://www.example.com/image.jpg" download class="img">Download</a>
Enter fullscreen mode Exit fullscreen mode

For example, to select an element with a specific class, write a period (.), followed by the element's class name.

p.img {
  text-align: center;
  font-size: 20px;
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <p> element with class="img".

However, here is how it will look on a webpage:

View original code in Codepen.

Attribute CSS Selectors

Attribute selectors select all elements that have a given attribute or attribute value. We include attributes in an HTML element's opening tag. In Attribute selectors, we have selectors such as:

Has Attribute

Has attribute selector select elements with a specified attribute.

The syntax for Has Attribute Selector is:

selector[attribute] {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Has Attribute Selector:

In the example below ⬇️ the <a> element has attributes like href and target.

<a href="#" target="_blank">Click Here</a>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <a> element:

a[target]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of the target.

However, here is how it will look on a webpage:

View original code in Codepen.

Exact Attribute

Exact attribute selector selects elements with a specified attribute and value.

The equals (=) character represents the Exact attribute selectors.

The syntax for Exact Attribute Selector is:

selector[attribute="value"] {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Exact Attribute Selector:

In the example below ⬇️, the <a> element has attributes like href and target.

<a href="https://google.com" target="_blank">Google</a>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <a> element:

a[href="https://google.com"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href="https://google.com".

However, here is how it will look on a webpage:

View original code in Codepen.

Begins With Attribute

Begins with attribute selector select elements whose attribute value begins with a specific value.

The circumflex accent (^) character represents Begins with attribute selector.

The syntax for Begins with Attribute Selector is:

selector[attribute^="value"] {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Begins with Attribute Selector:

In the example below ⬇️ the <a> element has attributes like href and target.

<a href="https://google.com" target="_blank">Google</a>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <a> element:

a[href^="https://"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href begins with "https://".

However, here is how it will look on a webpage:

View original code in Codepen.

End With Attribute

Ends with attribute selector select elements whose attribute value ends with a specific value.

The dollar sign ($) character represents Ends with attribute selector.

The syntax for Ends with Attribute Selector is:

selector[attribute$="value"] {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Ends with Attribute Selector:

In the example below ⬇️, the <a> element has attributes like href and target.

<a href="http://www.example.com/image.jpg" download" target="_blank">Get Stunning Image</a>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <a> element:

a[href$=".jpg"]{
  font-size: 20px;
  color: yellow;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <a> element which has the attribute of href ends with ".jpg".

However, here is how it will look on a webpage:

View original code in Codepen.

Substring Attribute

Substring Attribute Selector selects elements whose attribute value contains a specified value.

The asterisk (*) character represents the substring attribute selector.

The syntax for Substring Attribute Selector is:

selector[attribute*="value"] {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Substring Attribute Selector:

In the example below ⬇️ the <div> element has an attribute of data-red.

  <div data-red="1234">This is Div</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <div> element:

div[data-red*="23"]{
  font-size: 20px;
  color: lightgreen;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <div> element which has the attribute of data-red that contains "23".

However, here is how it will look on a webpage:

View original code in Codepen.

Pseudo Element Selectors

1. Textual Pseudo Elements

  • First-Letter Selector The first-letter selector applies a style to the first letter of the element.

Note : The ::first-letter pseudo-element work only for block elements.

The syntax for First-Letter Selector is:

selector::first-letter {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of First-Letter Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>This is Sample Text.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <p> element:

p::first-letter{
  font-size: 50px;
  font-weight: 900;
  padding: 0 3px;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the first letter of the <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

  • First-Line Selector

The first-line selector applies a style to the first line of the element.

Note : The ::first-line pseudo-element work only for block elements.

The syntax for First-Line Selector is:

selector::first-line {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of First-Line Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>
    This is Sample Text.<br> 
    Here we are demonstrating usage of pseudo elements
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <p> element:

p::first-line{
  background-color: orange;
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the first line of <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

2. Generated Content Pseudo Elements

  • Before Selector

The Before Selector adds content before the HTML element.

Note : When using the ::before pseudo-element, we must use the content property to make our styles visible.

The syntax for Before Selector is:

selector::before {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Before Selector:

In the example below ⬇️ there is sample paragraph in <div> element.

<div class="pseudo-element">
  <p> This is Sample Text.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML


 element:



```css
p::before{
  content: "content";
  background: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will add content with red background before


 element.

However, here is how it will look on a webpage:




View original code in [Codepen](https://codepen.io/KadlagAkash/pen/yLKowJm). 

- **After Selector**

The After Selector adds content after the HTML element. 

>  **Note** : When using the ::after pseudo-element, we must use the content property to make our styles visible.

**The syntax for After Selector is:**


```css
selector::after {
property: value;
  }
Enter fullscreen mode Exit fullscreen mode

Example of After Selector:

In the example below ⬇️, there is a sample paragraph in the <div> element.

<div class="pseudo-element">
  <p>This is Sample Text. </p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <p> element:

p::after{
  content: "content";
  background: blue;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will add content with blue background after the <p> element.

However, here is how it will look on a webpage:

View original code in Codepen.

Pseudo Class Selectors

1. Pseudo Class State Selectors

  • Hover Selector

The Hover Selector selects elements that are hovered by the mouse.

:hover works when the user moves their cursor over an element but does not select it.

The syntax for Hover Selector is:

selector:hover {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Hover Selector:

In the example below ⬇️, there is a sample paragraph in the <a> element.

<p>Hover on this link: <a href="#">click</a></p>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <a> element:

a:hover{
  color: black;
  background: orange;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <a> element when we hover over it.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Focus Selector

The Focus Selector selects an element that is being focused on by the user. "focused on by the user" means it accepts the keyboard or any other user input.

It works on user input elements used in forms and is triggered when the user clicks on it.

The syntax for Focus Selector is:

selector:focus {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of focus Selector:

In the example below ⬇️, there is <input> element.

<input type="text"  placeholder="focus/click on me I will be orange"/>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <input> element:

input:focus  {
  background: orange;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to <input> element when we focus on it.

However, here is how it will look on a webpage:

View original code in Codepen

  • Required Selector

The Required Selector selects inputs that are required.

Note : The :required selector only applies to the form elements: input, select and textarea.

The syntax for Required Selector is:

selector:required {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Required Selector:

In the example below ⬇️, there is <input> element.

<input type="text" required placeholder="Required Field"/>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <input> element:

input:required {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the <input> element which is required to fill.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Checked Selector

The Checked Selector selects checkboxes/radio buttons that are checked.

The checked selector matches every checked element (only for radio buttons and checkboxes) and element.

The syntax for Checked Selector is:

selector:checked {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Checked Selector:

In the example below ⬇️, there is <input> element.

<input type="radio" checked="checked" value="male" name="gender"/> Male<br/>
<input type="radio" value="female" name="gender"/> Female<br/>
<input type="checkbox" checked="checked" value="Bike"/> I have a bike<br/>
<input type="checkbox" value="Car"/> I have a car
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <input> element:

input:checked {
  height: 30px;
  width: 30px;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to <input> element which are checked.

However, here is how it will look on a webpage:

View original code in Codepen.

  • *Disabled Selector *

The Disabled Selector selects inputs that are disabled.

The syntax for Disabled Selector is:

selector:disabled {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Disabled Selector:

In the example below ⬇️ there is <input> element.

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled"   value="Disneyland">
</form>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <input> element:

input[type=text]:disabled {
  background: #dddddd;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to <input> element of type="text" which are disabled.

However, here is how it will look on a webpage:

View original code in Codepen.

2. Pseudo Class Position Selectors

  • First-Child Selector

The First-Child Selector applies a style to the element's first child.

The syntax for First-Child Selector is:

:first-child {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of First-Child Selector:

In the example below ⬇️ there is <li> element.

<ul>
  <li>This is first child</li>
  <li>This is second child</li>
  <li>This is third child</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <li> element:

ul li:first-child {
  color: red;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to the first element among a sibling group of <li> elements.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Last-Child Selector

The Last-Child Selector applies a style to the element's last child.

The syntax for Last-Child Selector is:

:last-child {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Last-Child Selector:

In the example below ⬇️ there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <li> element:

ul li:last-child {
  color: red;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to last element among a group of sibling <li> element i.e. Item 4 and Item 2.2

However, here is how it will look on a webpage:

View original code in Codepen.

  • Nth-Child Selector

The Nth-Child Selector matches elements based on their position among a group of siblings.

The syntax for Nth-Child Selector is:

:nth-child(expression) {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Keyword values

odd : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

even : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation :

<An+B> Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:
A is an integer step size,
B is an integer offset,
n is all non-negative integers, starting from 0.

It can be read as the An+Bth element of a list.

Example of Last-Child Selector:

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

In the example below ⬇️ there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <li> element:

ul li:nth-child(2n+1) {
  color: red;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to Item 1, Item 3, Item 3.1 and Item 3.3

However, here is how it will look on a webpage:

View original code in Codepen.

  • Nth-Last-Child Selector

The Nth-Last-Child Selector matches elements based on their position among a group of siblings, counting from the end.

The syntax for Nth-Last-Child Selector is:

:nth-last-child(expression) {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Keyword values

odd : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.

even : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

Functional notation :

<An+B> Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element, counting from the end, is 1. The values A and B must both be <integer>.

Example of Last-Child Selector:

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.

In the example below ⬇️, there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <li> element:

ul li:nth-last-child(2n+1) {
  color: red;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to Item 4, Item 2, Item 4.3 and Item 4.1

However, here is how it will look on a webpage:

View original code in Codepen.

  • Only-Child Selector

The Only-Child selector applies a style to an element if it is the only element within a parent.

The syntax for Only-Child Selector is:

:only-child {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Only-Child Selector:

In the example below ⬇️, there is <li> element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 
    <ul>
      <li>Item 3.1</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ HTML <li> element:

ul li:only-child {
  background: red;
  color: white;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to Item 3.1 cause is the only child.

However, here is how it will look on a webpage:

View original code in Codepen.

  • First of Type Selector

The First of Type selector represents the first element of its type among a group of sibling elements.

The syntax for First of Type Selector is:

:first-of-type {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of First of Type Selector:

In the example below ⬇️, there is one <h2> and two <p> elements.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ first paragraph:

p:first-of-type {
  color: red;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to 'Paragraph 1' cause is the first of the <p> type.

However, here is how it will look on a webpage:

View original code in Codepen.

Checkout The Difference Between :first-child and :first-of-type

  • Last of Type Selector

The Last of Type selector represents the last element of its type among a group of sibling elements.

The syntax for Last of Type Selector is:

:last-of-type {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Last of Type Selector:

In the example below ⬇️ there is one <h2> and two <p> element.

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ last paragraph:

p:last-of-type {
  color: blue;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply to 'Paragraph 2' cause is the last of the <p> type.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Nth of Type Selector

The Nth of the Type selector matches elements based on their position among siblings of the same type (tag name).

The syntax for Nth of Type Selector is:

:nth-of-type(expression) {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Nth of Type Selector:

In the example below ⬇️, there are multiple <div> and <p> elements.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ paragraphs:

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: orange;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply skyblue color to 'Paragraph 1' & 'Paragraph 3' and orange color to 'Paragraph 2' & 'Paragraph 4'.

However, here is how it will look on a webpage:

View original code in Codepen.

Checkout The Difference Between :nth-child and :nth-of-type

  • Nth Last of Type Selector

The Nth Last of Type selector matches elements based on their position among siblings of the same type (tag name), counting from the end.

The syntax for Nth Last of Type Selector is:

:nth-last-of-type(expression) {
  property: value;
 }
Enter fullscreen mode Exit fullscreen mode

Example of Nth Last of Type Selector:

In the example below ⬇️ there are multiple <div> and <p> elements.

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ paragraphs:

/* Odd paragraphs */
p:nth-last-of-type(2n+1) {
  color: skyblue;
}

/* Even paragraphs */
p:nth-last-of-type(2n) {
  color: orange;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply skyblue color to 'Paragraph 4' & 'Paragraph 2' and orange color to 'Paragraph 3' & 'Paragraph 1'.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Only of the Type Selector

The Only of Type selector represents an element that has no siblings of the same type.

The syntax for Only of Type Selector is:

:only-of-type {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Only of Type Selector:

In the example below ⬇️, there are multiple elements in the <main> element.

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ elements with no siblings of the same type:

main :only-of-type {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will apply red color to <p> and <i> elements.

However, here is how it will look on a webpage:

View original code in Codepen.

  • Not Selector

The Not selector represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

The syntax for Only of Type Not Selector is:

:not(<selector-list>){
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example of Not Selector:

In the example below ⬇️ there are two <p> elements.

<p>I am a normal paragraph.</p>
<p class="fancy">I am so very fancy paragraph..!</p>
Enter fullscreen mode Exit fullscreen mode

Styling the above ⬆️ <p> element with no fancy class:

.fancy {
  background: orange;
  color: black;
  text-shadow: 2px 2px 3px red;
  font-style: italic;
}

p:not(.fancy) {
  font-style: normal;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the example above ⬆️, the CSS rule will not apply font-weight of bold to <p> element with class="fancy".

However, here is how it will look on a webpage:

View original code in Codepen.

In closing

I hope that you’ve found this tutorial and code examples on CSS Selectors helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍

Other Resources

Check out some of these resources for a more in-depth look into CSS selectors :

Want more..?

I write web development articles on my blog @dev.to/kadlagakash, and also post development-related content on the following platforms:

Top comments (0)

Read next

rayechos profile image

Sass vs. SCSS: What's the Difference and Which One Should You Use?

Raymond ADEBISI -

ricardocaselati profile image

Types: char and boolean

Ricardo Caselati -

pawandeore profile image

Introduction to Git: A Powerful Version Control System

pawan deore -

dotnetfullstackdev profile image

Static Keyword in C# Explained in 1 Minute

DotNet Full Stack Dev -