# Mastering CSS & CSS3 Selectors in 2022.

### 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:**

```css
selector {
   CSS-property: value;
}
```

# 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
    * {
      CSS-Property: value;
    }
    ```
    
    **Example of Universal Selector:**
    
    ```css
    * {
      margin: 0;
      padding: 0;
      outline: 0;
    }
    ```
    
    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:**
    
    ```css
    element {
     property: value;
    }
    ```
    
    **Example of Element Type Selector:**
    
    ```css
    p {
    text-align: center;
    font-size: 20px; 
    }
    ```
    
    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:  
    
%[https://codepen.io/KadlagAkash/pen/OJvjaqG] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/OJvjaqG)
    
* ### 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:**
    
    ```css
    .class-name {
     property: value;
    }
    ```
    
    **Example of Class Selector:**
    
    In the example below ⬇️ the `<p>` element has a class="text"
    
    ```html
    <p class="text">Text goes here....</p>
    ```
    
    To select the `<p>` element using the CSS class selector, we:
    
    ```css
    .text {
    text-align: center;
    font-size: 20px; 
    color: skyblue;
    }
    ```
    
    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:  
    
    %[https://codepen.io/KadlagAkash/pen/xxWLQoP] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/xxWLQoP)
    
* ### 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:**
    
    ```css
    #id-name {
     property: value;
    }
    ```
    
    **Example of ID Selector:**
    
    In the example below ⬇️, the `<p>` element has an id="tagline"
    
    ```html
    Tagline goes here....
    ```
    To select the element using the ID selector, we: `css #tagline { text-align: center; font-size: 25px; font-style: italic; color: red; letter-spacing: 2px; }`  
  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:
%[https://codepen.io/KadlagAkash/pen/WNzELNv] 

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

\&gt; *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:**
    
    ```css
    selector1 selector2 {
     property: value;
    }
    ```
    
    **Example of Descendant Selector:**
    
    In the example below ⬇️, the `<div>` element has multiple nested `<p>` elements.
    
    ```html
    <div>
    <p>Paragraph 1</p>
    <p>
        <p>Paragraph 2.1</p>
        <p>Paragraph 2.2</p>
    </p>
    <p>Paragraph 3</p>
    </div>
    ```
    
    To select all `<p>` elements using the descendant selector, we use:
    
    ```css
    div p {
    text-align: center;
    font-size: 20px;
    font-style: italic; 
    color: teal;
    }
    ```
    
    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:
    
    %[https://codepen.io/KadlagAkash/pen/mdxMaQy] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/mdxMaQy)
    
* ### 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 (&gt;) character to represent a child selector.
    
    **The syntax for Direct Child Selector is:**
    
    ```css
    Parent-selector > Child-selector {
     property: value;
    }
    ```
    
    **Example of Direct Child Selector:**
    
    In the example below ⬇️, the `<div>` element has multiple nested `<p>` elements.
    
    ```html
    <div>
    <p>Paragraph 1</p>
    <span>
        <p>Paragraph 2.1</p>
        <p>Paragraph 2.2</p>
    </span>
    <p>Paragraph 3</p>
    </div>
    ```
    
    To select all `<p>` elements using the direct child selector, we use:
    
    ```css
    div > p {
    text-align: center;
    font-size: 20px;
    font-style: italic; 
    color: lightgreen;
    }
    ```
    
    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:
    
    %[https://codepen.io/KadlagAkash/pen/BardvEL] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/BardvEL)
    
* ### 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:**
    
    ```css
    first-sibling-selector + second-sibling-selector {
     property: value;
    }
    ```
    
    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.
    
    ```html
    <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>
    ```
    
    To select `<li>` that comes immediately after `<li>` element of class="red" using the general sibling selector, we use:
    
    ```css
    li.red + li {
      background: red;
    }
    ```
    
    In the example above ⬆️, the CSS rule will apply to the ltem 3.
    
    However, here is how it will look on a webpage:
    
    %[https://codepen.io/KadlagAkash/pen/OJvjdPb] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/OJvjdPb)
    
* ### 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:**
    
    ```css
    first-sibling-selector ~ second-sibling-selector {
     property: value;
    }
    ```
    
    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.
    
    ```html
    <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>
    ```
    
    To select all `<li>` that comes after `<li>` element of class="red" using the general sibling selector, we use:
    
    ```css
    li.red ~ li {
    background: red;
    }
    ```
    
    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:
    
    %[https://codepen.io/KadlagAkash/pen/WNzEPvZ] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/WNzEPvZ)
    
* ### 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; }

````plaintext
**Example of Or Selector:**

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

Instead of doing this:
```css
.btn-primary{ 
  border-radius : 3px;  
}
.btn-secondary{
  border-radius : 3px;
}
````

Use Or selector :

```css
.btn-primary, .btn-secondary {
    border-radius : 3px;
}
```

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:

%[https://codepen.io/KadlagAkash/pen/YzaxBYW] 

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

* ### 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"
    
    ```html
    <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>
    ```
    
    For example, to select an element with a specific class, write a period (.), followed by the element's class name.
    
    ```css
    p.img {
    text-align: center;
    font-size: 20px;
    color: green;
    }
    ```
    
    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:
    
    %[https://codepen.io/KadlagAkash/pen/NWYvoMY] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/NWYvoMY)
    

# 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:**
    
    ```css
    selector[attribute] {
     property: value;
    }
    ```
    
    **Example of Has Attribute Selector:**
    
    In the example below ⬇️ the `<a>` element has attributes like href and target.
    
    ```html
    <a href="#" target="_blank">Click Here</a>
    ```
    
    Styling the above ⬆️ HTML `<a>` element:
    

a\[target\]{ font-size: 20px; color: yellow; text-decoration: none; } `In the example above ⬆️, the CSS rule will apply to the`\`\`\` element which has the attribute of the target.

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

%[https://codepen.io/KadlagAkash/pen/YzaxBdN] 

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

* ### 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:**
    
    ```css
    selector[attribute="value"] {
     property: value;
    }
    ```
    
    **Example of Exact Attribute Selector:**
    
    In the example below ⬇️, the `<a>` element has attributes like href and target.
    
    ```html
    <a href="https://google.com" target="_blank">Google</a>
    ```
    
    Styling the above ⬆️ HTML `<a>` element:
    

a\[href="https://google.com"\]{ font-size: 20px; color: yellow; text-decoration: none; } `In the example above ⬆️, the CSS rule will apply to the`\`\`\` element which has the attribute of href="https://google.com".

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

%[https://codepen.io/KadlagAkash/pen/yLKoZww] 

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

* ### 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:**
    
    ```css
    selector[attribute^="value"] {
     property: value;
    }
    ```
    
    **Example of Begins with Attribute Selector:**
    
    In the example below ⬇️ the `<a>` element has attributes like href and target.
    
    ```html
    <a href="https://google.com" target="_blank">Google</a>
    ```
    
    Styling the above ⬆️ HTML `<a>` element:
    

a\[href^="https://"\]{ font-size: 20px; color: yellow; text-decoration: none; } `In the example above ⬆️, the CSS rule will apply to the`\`\`\` element which has the attribute of href begins with "https://".

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

%[https://codepen.io/KadlagAkash/pen/abYyXrv] 

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

* ### 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:**
    
    ```css
    selector[attribute$="value"] {
     property: value;
    }
    ```
    
    **Example of Ends with Attribute Selector:**
    
    In the example below ⬇️, the `<a>` element has attributes like href and target.
    
    ```html
    <a href="http://www.example.com/image.jpg" download" target="_blank">Get Stunning Image</a>
    ```
    
    Styling the above ⬆️ HTML `<a>` element:
    

a\[href$=".jpg"\]{ font-size: 20px; color: yellow; text-decoration: none; } `In the example above ⬆️, the CSS rule will apply to the`\`\`\` element which has the attribute of href ends with ".jpg".

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

%[https://codepen.io/KadlagAkash/pen/OJvjdYv] 

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

* ### 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:**
    
    ```css
    selector[attribute*="value"] {
     property: value;
    }
    ```
    
    **Example of Substring Attribute Selector:**
    
    In the example below ⬇️ the `<div>` element has an attribute of data-red.
    
    ```html
    <div data-red="1234">This is Div</div>
    ```
    
    Styling the above ⬆️ HTML `<div>` element:
    

div\[data-red\*="23"\]{ font-size: 20px; color: lightgreen; text-decoration: none; } `In the example above ⬆️, the CSS rule will apply to the`

\`\`\` element which has the attribute of data-red that contains "23".

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

%[https://codepen.io/KadlagAkash/pen/xxWLMvZ] 

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

# 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:**
    
    ```css
    selector::first-letter {
     property: value;
    }
    ```
    
    **Example of First-Letter Selector:**
    
    In the example below ⬇️, there is a sample paragraph in the `<div>` element.
    

This is Sample Text.

\`\`\` Styling the above ⬆️ HTML \`\`\`

\`\`\` element: \`\`\`css p::first-letter{ font-size: 50px; font-weight: 900; padding: 0 3px; } \`\`\` In the example above ⬆️, the CSS rule will apply to the first letter of the \`\`\`

\`\`\` element.

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

%[https://codepen.io/KadlagAkash/pen/gOexEpe] 

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

* ### 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:**
    
    ```css
    selector::first-line {
     property: value;
    }
    ```
    
    **Example of First-Line Selector:**
    
    In the example below ⬇️, there is a sample paragraph in the `<div>` element.
    

This is Sample Text.  
Here we are demonstrating usage of pseudo elements

\`\`\` Styling the above ⬆️ HTML \`\`\`

\`\`\` element: \`\`\`css p::first-line{ background-color: orange; color: black; } \`\`\` In the example above ⬆️, the CSS rule will apply to the first line of\`\`\`

\`\`\` element.

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

%[https://codepen.io/KadlagAkash/pen/vYRJPLe] 

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

## 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:**
    
    ```css
    selector::before {
     property: value;
    }
    ```
    
    **Example of Before Selector:**
    
    In the example below ⬇️ there is sample paragraph in `<div>` element.
    

This is Sample Text.

\`\`\` Styling the above ⬆️ HTML \`\`\`

\`\`\` element: \`\`\`css p::before{ content: "content"; background: red; } \`\`\` 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:

%[https://codepen.io/KadlagAkash/pen/yLKowJm] 

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;
    }
    ```
    
    **Example of After Selector:**
    
    In the example below ⬇️, there is a sample paragraph in the `<div>` element.
    

This is Sample Text.

\`\`\` Styling the above ⬆️ HTML \`\`\`

\`\`\` element: \`\`\`css p::after{ content: "content"; background: blue; } \`\`\` In the example above ⬆️, the CSS rule will add content with blue background after the \`\`\`

\`\`\` element.

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

%[https://codepen.io/KadlagAkash/pen/OJvjqRw] 

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

# 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:**
    
    ```css
    selector:hover {
     property: value;
    }
    ```
    
    **Example of Hover Selector:**
    
    In the example below ⬇️, there is a sample paragraph in the `<a>` element.
    

Hover on this link: [click](#)

\`\`\` Styling the above ⬆️ HTML \`\`\`\`\`\` element: \`\`\`css a:hover{ color: black; background: orange; } \`\`\` In the example above ⬆️, the CSS rule will apply to the \`\`\`\`\`\` element when we hover over it.

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

%[https://codepen.io/KadlagAkash/pen/YzaxgEe] 

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

* ### 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:**
    
    ```css
    selector:focus {
     property: value;
    }
    ```
    
    **Example of focus Selector:**
    
    In the example below ⬇️, there is `<input>` element.
    

\`\`\` Styling the above ⬆️ HTML \`\`\`\`\`\` element: \`\`\`css input:focus { background: orange; } \`\`\` In the example above ⬆️, the CSS rule will apply to \`\`\`\`\`\` element when we focus on it.

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

%[https://codepen.io/KadlagAkash/pen/WNzEmzq] 

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

* ### 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:**
    

```css
  selector:required {
     property: value;
  }
```

**Example of Required Selector:**

In the example below ⬇️, there is `<input>` element. `html <input type="text" required placeholder="Required Field"/>` Styling the above ⬆️ HTML `<input>` element: `css input:required { color: red; }` 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:

%[https://codepen.io/KadlagAkash/pen/yLKowqY] 

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

* ### 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:**
    

```css
  selector:checked {
     property: value;
  }
```

**Example of Checked Selector:**

In the example below ⬇️, there is `<input>` element. `html <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` Styling the above ⬆️ HTML `<input>` element: `css input:checked { height: 30px; width: 30px; }` 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:

%[https://codepen.io/KadlagAkash/pen/poLrYQj] 

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

* ### Disabled Selector
    
    The Disabled Selector selects inputs that are disabled.
    
    **The syntax for Disabled Selector is:**
    

```css
  selector:disabled {
     property: value;
  }
```

**Example of Disabled Selector:**

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

First name:  
Last name:  
Country:

\`\`\` Styling the above ⬆️ HTML \`\`\`\`\`\` element: \`\`\`css input\[type=text\]:disabled { background: #dddddd; } \`\`\` In the example above ⬆️, the CSS rule will apply to \`\`\`\`\`\` element of type="text" which are disabled.

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

%[https://codepen.io/KadlagAkash/pen/MWVvxLy] 

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

## 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:**
    

```css
   :first-child {
     property: value;
  }
```

**Example of First-Child Selector:**

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

* This is first child
    
* This is second child
    
* This is third child
    

\`\`\` Styling the above ⬆️ HTML \`\`\`

* \`\`\` element: \`\`\`css ul li:first-child { color: red; font-weight: bold; } \`\`\` In the example above ⬆️, the CSS rule will apply to the first element among a sibling group of \`\`\`
    
* \`\`\`elements.
    
    However, here is how it will look on a webpage:
    
    %[https://codepen.io/KadlagAkash/pen/qBoXvex] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/qBoXvex)
    
    * ### Last-Child Selector
        
        The Last-Child Selector applies a style to the element's last child.
        
        **The syntax for Last-Child Selector is:**
        
    
    ```css
       :last-child {
         property: value;
      }
    ```
    
    **Example of Last-Child Selector:**
    
    In the example below ⬇️ there is `<li>` element. \`\`\`html
    
    * Item 1
        
    * Item 2
        
        * Item 2.1
            
        * Item 2.2
            
    * Item 3
        
    * Item 4
        
    
    `Styling the above ⬆️ HTML`
    
* `element:` css ul li:last-child { color: red; font-weight: bold; } `In the example above ⬆️, the CSS rule will apply to last element among a group of sibling`
    
* \`\`\` element i.e. Item 4 and Item 2.2
    
    However, here is how it will look on a webpage:
    
    %[https://codepen.io/KadlagAkash/pen/LYdjvYm] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/LYdjvYm)
    
    * ### 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:**
        
    
    ```css
       :nth-child(expression) {
         property: value;
      }
    ```
    
    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. \`\`\`html
    
    * Item 1
        
    * Item 2
        
        * Item 2.1
            
        * Item 2.2
            
    * Item 3
        
    * Item 4
        
    
    `Styling the above ⬆️ HTML`
    
* `element:` css ul li:nth-child(2n+1) { color: red; font-weight: bold; } \`\`\` 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:
    
    %[https://codepen.io/KadlagAkash/pen/LYdjvRB] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/LYdjvRB)
    
    * ### 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:**
        
    
    ```css
       :nth-last-child(expression) {
         property: value;
      }
    ```
    
    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. \`\`\`html
    
    * Item 1
        
    * Item 2
        
    * Item 3
        
    * Item 4
        
    * Item 5
        
    
    `Styling the above ⬆️ HTML`
    
* `element:` css ul li:nth-last-child(2n+1) { color: red; font-weight: bold; } \`\`\` 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:
    
    %[https://codepen.io/KadlagAkash/pen/YzaxMZB] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/YzaxMZB)
    
    * ### 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:**
        
    
    ```css
       :only-child {
         property: value;
      }
    ```
    
    **Example of Only-Child Selector:**
    
    In the example below ⬇️, there is `<li>` element. \`\`\`html
    
    * Item 1
        
    * Item 2
        
    * Item 3
        
        * Item 3.1
            
    * Item 4
        
    * Item 5
        
    
    `Styling the above ⬆️ HTML`
    
* `element:` css ul li:only-child { background: red; color: white; font-weight: bold; } \`\`\` 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:
    
    %[https://codepen.io/KadlagAkash/pen/NWYvmgN] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/NWYvmgN)
    
    * ### 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:**
        
    
    ```css
       :first-of-type {
         property: value;
      }
    ```
    
    **Example of First of Type Selector:**
    
    In the example below ⬇️, there is one `<h2>` and two `<p>`elements. \`\`\`html
    
    ## Heading
    
    Paragraph 1
    
    Paragraph 2
    
    \`\`\` Styling the above ⬆️ first paragraph: \`\`\`css p:first-of-type { color: red; font-style: italic; } \`\`\` In the example above ⬆️, the CSS rule will apply to 'Paragraph 1' cause is the first of the \`\`\`
    
    \`\`\` type.
    
    However, here is how it will look on a webpage:
    
    %[https://codepen.io/KadlagAkash/pen/VwXzNzg] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/VwXzNzg)
    
    \&gt; [Checkout The Difference Between :first-child and :first-of-type](https://stackoverflow.com/questions/24657555/what-is-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:**
        
    
    ```css
       :last-of-type {
         property: value;
      }
    ```
    
    **Example of Last of Type Selector:**
    
    In the example below ⬇️ there is one `<h2>` and two `<p>` element. \`\`\`html
    
    ## Heading
    
    Paragraph 1
    
    Paragraph 2
    
    \`\`\` Styling the above ⬆️ last paragraph: \`\`\`css p:last-of-type { color: blue; font-style: italic; } \`\`\` In the example above ⬆️, the CSS rule will apply to 'Paragraph 2' cause is the last of the \`\`\`
    
    \`\`\` type.
    
    However, here is how it will look on a webpage:
    
    %[https://codepen.io/KadlagAkash/pen/JjLyVra] 
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/JjLyVra)
    
    * ### 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:**
        
    
    ```css
       :nth-of-type(expression) {
         property: value;
      }
    ```
    
    **Example of Nth of Type Selector:**
    
    In the example below ⬇️, there are multiple `<div>` and `<p>` elements. \`\`\`html
    
    This element isn't counted.
    
    1st paragraph.
    
    2nd paragraph.
    
    This element isn't counted.
    
    3rd paragraph.
    
    4th paragraph.
    
    \`\`\` Styling the above ⬆️ paragraphs: \`\`\`css /\* Odd paragraphs \*/ p:nth-of-type(2n+1) { color: skyblue; }
    
    /\* Even paragraphs \*/ p:nth-of-type(2n) { color: orange; }
    
    ````plaintext
    
      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:
    
    %[https://codepen.io/KadlagAkash/pen/abYyxEK]
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/abYyxEK) 
    
      > [Checkout The Difference Between :nth-child and :nth-of-type](https://css-tricks.com/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:**
    ```css
     :nth-last-of-type(expression) {
       property: value;
    }
    ````
    
    **Example of Nth Last of Type Selector:**
    
    In the example below ⬇️ there are multiple `<div>` and `<p>` elements. \`\`\`html
    
    This element isn't counted.
    
    1st paragraph.
    
    2nd paragraph.
    
    This element isn't counted.
    
    3rd paragraph.
    
    4th paragraph.
    
    \`\`\` Styling the above ⬆️ paragraphs: \`\`\`css /\* Odd paragraphs \*/ p:nth-last-of-type(2n+1) { color: skyblue; }
    
    /\* Even paragraphs \*/ p:nth-last-of-type(2n) { color: orange; }
    
    ````plaintext
      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:
    
    %[https://codepen.io/KadlagAkash/pen/jOzLRzB]
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/jOzLRzB) 
    
    - ### 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:**
    ```css
     :only-of-type {
       property: value;
    }
    ````
    
    **Example of Only of Type Selector:**
    
    In the example below ⬇️, there are multiple elements in the `<main>` element. \`\`\`html
    
    I am \`div\` #1.
    
    I am the only \`p\` among my siblings.
    
    I am \`div\` #2.
    
    I am \`div\` #3. *I am the only \`i\` child.* *I am \`em\` #1.* *I am \`em\` #2.*
    
    \`\`\` Styling the above ⬆️ elements with no siblings of the same type: \`\`\`css main :only-of-type { color: red; }
    
    ````plaintext
      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:
    
    %[https://codepen.io/KadlagAkash/pen/ZExJZoa]
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/ZExJZoa) 
    
    - ### 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:**
    ```css
     :not(<selector-list>){
       property: value;
    }
    ````
    
    **Example of Not Selector:**
    
    In the example below ⬇️ there are two `<p>` elements. \`\`\`html
    
    I am a normal paragraph.
    
    I am so very fancy paragraph..!
    
    \`\`\` Styling the above ⬆️ \`\`\`
    
    \`\`\` element with no fancy class: \`\`\`css .fancy { background: orange; color: black; text-shadow: 2px 2px 3px red; font-style: italic; }
    
    p:not(.fancy) { font-style: normal; font-weight: bold; }
    
    ```plaintext
      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:
    
    %[https://codepen.io/KadlagAkash/pen/yLKorxz]
    
    View original code in [Codepen](https://codepen.io/KadlagAkash/pen/yLKorxz) 
    
    # 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 :
    - [MDN CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
    - [WDS CSS Selectors](https://youtu.be/l1mER1bV0N0)
    - [WDS CSS Pseudo Elements](https://youtu.be/OtBpgtqrjyo)
    
    ## Want more..?
    I write web development articles on my blog **[@akashkadlag.hashnode.dev](https://akashkadlag.hashnode.dev)**, and also post development-related content on the following platforms:
    
    - **[Twitter/X](https://twitter.com/yntpdotme)**
    
    - **[LinkedIn](https://www.linkedin.com/in/yntpdotme)**
    ```