CSS selectors

CSS (Cascading Style Sheets) selectors are patterns used to select and style HTML elements

What is CSS Selector

In CSS, They allow you to target specific elements on a web page and apply styles to them. Here are some commonly used CSS selectors:

Element Selector: Targets all instances of a particular HTML element.

Class Selector: Targets elements with a specific class attribute.

ID Selector: Targets a single element with a specific ID attribute.

Universal Selector: Targets all elements on a page.

Descendant Selector: Targets an element that is a descendant of another specified element.

Child Selector: Targets an element that is a direct child of another specified element.

Adjacent Sibling Selector: Targets an element that is immediately preceded by a sibling element.

Attribute Selector: Targets elements with a specific attribute or attribute value.

Pseudo-classes: Selectors that define a special state of an element.

Pseudo-elements: Selectors that style a specific part of an element.

In the upcoming capters, we will learn about these CSS selectors in detail

The CSS element Selector

The CSS element selector selects HTML elements based on the element name.

Example

<style>
         /* Element Selector */
    h1 {
       color: blue;         
       font-size: 20px; 
       }

    p {
      color: green;        
    }

    div {
        background-color: lightgray; 
        padding: 10px;               
        }
<style>

<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
    <div>This is a div element.</div>
</body>

Output

Hello World!

This is a paragraph.

This is a div element.

In the above example h1 is a CSS selector that selects the HTML element tag < h1 >

The CSS id Selector

The CSS ID selector is used to target a single HTML element with a specific ID attribute. The ID selector is prefixed with a hash symbol (#) followed by the ID value of the element.

Example

<style> 
 #heading {
    color: darkblue;        
    font-size: 20px;       
    text-align: center;      
}

#div-box {
    background-color: lightyellow; 
    border: 1px solid black;      
    padding: 15px;                
    margin-top: 20px;             
    border-radius: 5px;            
} 
</style>
 <body>
    <h1 id="heading"> Welcome to My Page</h1>
    <div id="div-box>div box specific styling</div>
</body>

Output

Welcome to My Page

div box specific styling.

In the above example #heading1 is an id selector of a specific html element whose id atrribute name is heading1.

Note: An id name cannot start with a number!

The CSS class Selector

The CSS class selector is used to target HTML elements with a specific class attribute. The class selector is prefixed with a period (.) followed by the class name.

Example

<style>
/* Class Selectors */
.title {
    color: teal;         
    font-size: 30px;         
    text-align: center;         
}

.box {
    background-color: pink; 
    border: 2px solid black;    
    padding: 15px;                
    margin: 10px 0;              
    border-radius: 5px;         
    text-align: center;         
}
</style>
<body>
    <h1 class="title">Welcome to My Page</h1>
    <div class="box">This is a box with specific styling.</div>
    <div class="box">This is another box with the same styling.</div>
<body>

Output

Welcome to My Page

This is a box with specific styling.

This is another box with the same styling.

The CSS Universal Selector

The universal selector in CSS is denoted by an asterisk (*) and it selects all elements on a web page. It matches any element type, allowing you to apply styles universally without specifying particular element types or classes.

Example

* {
  /* styles */
 }

You can click on above box to edit the code and run again.

Output

The CSS Descendant Selector

The CSS descendant selector allows you to select elements that are descendants of another specific element, regardless of their immediate parent-child relationship. It is denoted by a whitespace character ( ) and is useful when you want to target elements that are nested within other elements at any level.

Example

      /* styles */
    }

You can click on above box to edit the code and run again.

Output

The CSS Child Selector:

The CSS child selector allows you to select an element that is a direct child of another specific element. It is denoted by the greater than sign (>) and is useful when you want to target elements that are immediate children of a parent element, ignoring nested grandchildren.

Example

   parent > child {
   /* styles */
   }

You can click on above box to edit the code and run again.

Output

The CSS Adjacent Sibling Selector:

The CSS adjacent sibling selector allows you to select an element that is immediately preceded by another specific element. It is denoted by the plus sign (+) and is useful when you want to apply styles to an element based on its relationship with its immediately preceding sibling element.

Example

  element1 + element2 {
 /* styles */
   }

You can click on above box to edit the code and run again.

Output

The CSS Attribute Selector

The CSS attribute selector allows you to target HTML elements based on their attributes and attribute values. This selector is particularly useful when you want to style elements that have specific attribute values or attributes regardless of their element type.

Example

     [attribute="value"] {
      /* styles */
    }

You can click on above box to edit the code and run again.

Output

The CSS Pseudo-classes:

CSS pseudo-classes are used to define special states of HTML elements. They allow you to style elements based on user interaction, structural position, or element states like hover or focus. Pseudo-classes are preceded by a colon : in CSS.

:hover: Styles an element when the mouse cursor hovers over it.
:active: Styles an element while it is being activated by a user (usually while clicking).
:focus: Styles an element when it receives focus (usually via tabbing or clicking).
:first-child: Styles an element that is the first child of its parent.
:last-child: Styles an element that is the last child of its parent.
:nth-child(): Styles elements based on their position within their parent.
:nth-of-type(): Styles elements based on their position among siblings of the same type.
:not(): Styles elements that do not match a specific selector.

Example

* {
   /* styles */
}

You can click on above box to edit the code and run again.

Output

The CSS Pseudo-elements:

Pseudo-elements in CSS allow you to style specific parts of an element. They are denoted by double colons :: and are used to style parts of an element that are not actually part of the HTML structure.

Example

  selector::pseudo-element {
  /* styles */
}

You can click on above box to edit the code and run again.