CSS Selectors

 

CSS selectors are patterns used in Cascading Style Sheets (CSS) to target and apply styles to specific HTML elements. They define which elements on a webpage should be styled by the corresponding CSS rules. Selectors can be based on element types, classes, IDs, attributes, or even element relationships. Common types include universal (*), type, class (.), ID (#), and pseudo-class selectors, which enable dynamic styling. By using selectors, developers control the appearance and layout of a webpage, ensuring that specific elements are styled according to design requirements. Selectors form the foundation of styling in CSS.

1. Universal Selector (*)

/* Selects all elements */
* {
    margin: 0;
    padding: 0;
 }

 This rule applies to all the document
 
 
2. Element Selector 
 
It targets all elements of a specific type.

 

p {
    color: red;
}

Any text inside a <p> element will appear red in color when this CSS rule is applied.
 
 
 
3. Class Selector 
 
It targets elements with a specific class attribute and are prefixed by are prefixed with a dot (.)

 

css
.classname {
    color: green;
}

 

html
<p class=”classname”>This paragraph is green.</p>

Here, the text with the class name as “classname” will appear green
 
 
 
4. ID Selector 
 
It targets a single element with a specific id attribute and are prefixed with a hash symbol (#)

 

css
#idname {
    color: blue;
}
html
<p id=”idname”>This paragraph is blue.</p>

 The text with the id name “idname” will appear blue
 
 
 
EXAMPLE FOR ELEMENT CLASS AND ID SELECTORS
 

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>CSS Selectors Example</title>
    <style>
     /* Element Selector: Applies to all <p> elements */
        p {
            color: black;
            font-size: 16px;
        }

     /* Class Selector: Applies to elements with the class “example-class” */
        .example-class {
            color: green;
            font-weight: bold;
        }

     /* ID Selector: Applies to the element with the ID “example-id” */
        #example-id {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
     <h5>CSS Selectors Demo</h5>
     <p>This is an example of an element selector.</p>
     <div class=”example-class”>
     This is an example of a class selector.
     </div>
     <p id=”example-id”>
     This is an example of an ID selector.
     </p>
</body>
</html>

OUTPUT
CSS Selectors Example

CSS Selectors Demo

This is an example of an element selector.

This is an example of a class selector.

This is an example of an ID selector.

 
  1. Attribute selector

An attribute selector in CSS is used to select elements with a specific attribute or attribute value. There are several types of attribute selectors, each serving different purposes. Here are the main types:

  • Presence Selector –  [attribute]

    Selects elements with the specified attribute regardless of its value.

     /* Selects all elements with a title attribute */
     [title] {
        border: 1px solid red;
     }

 

  • Exact Match Selector – [attribute=”value”]

    Selects elements with the specified attribute and value.

     /* Selects all elements with a title attribute equal to “example” */
     [title=”example”] {
        border: 1px solid blue;
     }

 

  • Word Match Selector – [attribute~=”value”]

    Selects elements with the specified attribute containing a space-separated list of values, one of which is exactly equal to the specified value.

     /* Selects all elements with a class attribute that contains the word “example” */
     [class~=”example”] {
        border: 1px solid green;
     }

 

  • Hyphenated Match Selector – [attribute|=”value”]

    Selects elements with the specified attribute value that either equals the specified value or starts with the specified value followed by a hyphen (-).

     /* Selects all elements with a lang attribute equal to “en” or starting with “en-” */
     [lang|=”en”] {
        border: 1px solid yellow;
     }

 

  • Starts With Selector – [attribute^=”value”]

    Selects elements with the specified attribute value starting with the specified value.

     /* Selects all elements with a title attribute that starts with “ex” */
     [title^=”ex”] {
        border: 1px solid purple;
     }

 

  • Ends With Selector – [attribute$=”value”]

    Selects elements with the specified attribute value ending with the specified value.

     /* Selects all elements with a title attribute that ends with “ple” */
     [title$=”ple”] {
        border: 1px solid orange;
     }

 

  • Contains Selector – [attribute*=”value”]

    Selects elements with the specified attribute value containing the specified value.

     /* Selects all elements with a title attribute that contains “exam”*/
     [title*=”exam”] {
        border: 1px solid pink;
     }

 

These selectors are powerful tools in CSS for targeting elements based on their attributes, providing a high degree of control over styling specific elements in an HTML document.

EXAMPLE OF ATTRIBUTE SELECTORS

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Attribute Selector Example</title>
    <style>
        /* 1. Presence Selector – [attribute] – Selects elements with the specified attribute */
        input[required] {
            border: 2px solid red;
        }

         /* 2. Exact Match Selector – [attribute=”value”] – Selects elements with the specified attribute value */
        input[type=”email”] {
            background-color: yellow;
        }

         /* 3. Word Match Selector – [attribute~=”value”] – Selects elements with the specified word in the attribute’s value */
        [class~=”highlight”] {
            background-color: lightpink;
        }

         /* 4. Hyphenated Match Selector – [attribute|=”value”] – Selects elements with the specified attribute value or starting with the value followed by a hyphen */
        [lang|=”en”] {
            color: blue;
        }

         /* 5. Starts With Selector – [attribute^=”value”] – Selects elements with the attribute value beginning with the specified value */
        a[href^=”https://”] {
            background-color: white;
        }

         /* 6. Ends With Selector – [attribute$=”value”] – Selects elements with the attribute value ending with the specified value */
        a[href$=”.org”] {
            color:blue;
        }

         /* 7. Contains Selector – [attribute*=”value”] – Selects elements with the attribute value containing the specified value */
        a[href*=”more”] {
            color: black;
        }
    </style>
</head>
<body>
    <h3>CSS Attribute Selector Examples</h3>
    <!– 1. [attribute] –>
    <input type=”text” required placeholder=”Required Field”>

     <!– 2. [attribute=”value”] –>
    <input type=”email” placeholder=”Email Address”>

     <!– 3. [attribute~=”value”] –>
    <p class=”highlight”>This text is highlighted.</p>
    <p class=”note”>This text is not highlighted.</p>

    <!– 4. [attribute|=”value”] –>
    <p lang=”en”>This text is in English.</p>
    <p lang=”fr”>Ce texte est en français.</p>

     <!– 5. [attribute^=”value”] –>
    <a href=”https://www.example.com”>Visit Example (HTTPS link)</a>

     <!– 6. [attribute$=”value”] –>
    <a href=”https://www.nonprofit.org”>Nonprofit Organization</a>

     <!– 7. [attribute*=”value”] –>
    <a href=”https://www.learnwebsitebuilding.com”>Learn Web Development</a>
</body>
</html>

OUTPUT
Attribute Selector Example

CSS Attribute Selector Examples

This text is highlighted.

This text is not highlighted.

This text is in English.

Ce texte est en français.

Visit Example (HTTPS link) Nonprofit Organization Learn Web Development


Difference between the Word Match Selector and the Contains Selector

Selector

Syntax

Matches

Example

Word Match Selector

[attribute~=”value”]


Matches if the attribute contains the exact word



[class~=”intro”] matches <p class=”intro
main-text”>, but not <p class=”intro-text”>.

Contains Selector

[attribute*=”value”]


Matches if the attribute contains the value anywhere
(as a substring)



[class*=”intro”] matches both <p
class=”intro-text”> and <p class=”introduction”>.

The key difference is that the Word Match Selector looks for a whole word, while the Contains Selector looks for any substring match

 
 
  1. Combinator Selector

Combinator selectors in CSS are used to combine multiple selectors to target elements based on their relationships within the HTML structure. There are four main types of combinator selectors: descendant, child, adjacent sibling, and general sibling.

  • Descendant Combinator (space)

    Selects all elements that are descendants of a specified element.

     /* Selects all <p> elements inside <div> elements */
     div p {
        color: blue;
     }

  • Child Combinator (>)

    Selects all elements that are direct children of a specified element.

     /* Selects all <p> elements that are direct children of <div> elements */
     div > p {
        color: green;
     }

 

  • Adjacent Sibling Combinator (+)

    Selects the element that is immediately preceded by the specified element.

     /* Selects the first <p> element that immediately follows each <div> element */
     div + p {
        color: red;
     }

 

  • General Sibling Combinator (~)

    Selects all elements that are siblings of a specified element, following it.

     /* Selects all <p> elements that are siblings of <div> elements */
     div ~ p {
        color: purple;
     }


EXAMPLE OF COMBINATOR SELECTOR

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Combinator Selector Example</title>
    <style>

        /* Descendant combinator */
        ul li.child-item {
            color: pink;  /* Targets child-item inside any ul within parent-list */
        }

        /* Child combinator */
        ul.parent-list > li.item-1 {
            background-color: lightblue;  /* Targets direct child item-1 of parent-list */
        }

        /* Adjacent sibling combinator */
        li.item-1 + li.item-2 {
            color: red;  /* Targets item-2 immediately after item-1 */
        }

         /* General sibling combinator */
        li.item-1 ~ li.item-3 {
            background-color: yellow;  /* Targets item-3, a sibling of item-1 */
        }
    </style>
</head>
<body>
    <ul class=”parent-list”>
        <li class=”item-1″>Item 1 – Child Combinator</li>
        <li class=”item-2″>Item 2 – Adjacent Sibling Combinator</li>
        <ul>
            <li class=”child-item”>Child Item 1 – Descendent Combinator</li>
            <li class=”child-item”>Child Item 2 – Descendent Combinator</li>
        </ul>
        <li class=”item-3″>Item 3 – General Sibling Combinator</li> 
    </ul>
</body>
</html>

OUTPUT

Combinator Selector Example

CSS Combinator Selector Examples

  • Item 1 - Child Combinator
  • Item 2 - Adjacent Sibling Combinator
    • Child Item 1 - Descendent Combinator
    • Child Item 2 - Descendent Combinator
  • Item 3 - General Sibling Combinator
Scroll to Top