❮ Previous Next ❯

CSS Selectors

  • Learn to target HTML elements using CSS selectors including ID, class, element, and pseudo-classes.

  • The Heart & Brain of CSS

    What are CSS Selectors ?

    CSS Selectors are the rules that decide which HTML elements will be styled.

    In very simple words:

    Selector = Target

    CSS without selectors is like:
    Painting without knowing which wall
    Sending a message without a receiver

CSS Paragraph Color Styling

This CSS code selects all p tag (paragraph) elements and changes their text color to red using the color property. 

p {
    color: red;
}

  • Selector → p
    Browser → “Style ALL <p> elements”

    Why CSS Selectors Are SUPER IMPORTANT

    Selectors help you:

    Style exactly what you want :
     Avoid unwanted design changes
     Improve website performance
     Write clean & professional CSS
     Control large websites easily

    Real-Life Analogy:

    Selectors are like filters on Amazon
    You choose:

    • Brand

    • Price

    • Color

    Same way, selectors choose HTML elements.

    How CSS Selectors Work (Behind the Scenes)

    Browser steps:
      Read HTML
      Read CSS
     Match selectors with HTML
     Apply styles

    Simple selector → Fast rendering
    Complex selector → Slower page

    TYPES OF CSS SELECTORS 

    CSS provides many selector types for different situations.

    Element Selector (Tag Selector)

    What is it ?

    Selects elements using HTML tag name.

Element Selector (Tag Selector) Syntax

An Element Selector selects HTML elements by their tag name and applies CSS styles to all matching elements. 

 tagname {
    property: value;
}

Element Selector Example

This CSS code selects all h1 heading elements and changes their text color to purple using the color property. 

h1 {
    color: purple;
}

  • Styles ALL <h1> elements

    Element selector is like:

    “ALL students wear uniform”

    Advantages:

    Easy
    Beginner-friendly

    Disadvantages:

    Too general
    Styles everything of that type

    Class Selector (.)

    What is it ?

    Selects elements using class attributes.

Class Selector (.) Syntax

A Class Selector selects HTML elements using their class attribute and applies CSS styles to all elements with that specific class name. 

.classname {
    property: value;
}

Class Selector Example

This code uses a class selector to style the paragraph with the class "highlight", changing its text color to orange and background color to yellow. 

<p class="highlight">Hello</p>

.highlight {
    color: orange;
    background-color: yellow;
}

  • Can be reused multiple times 

    Class selector = Group instruction 

    “Students wearing red badges come forward.”

    Advantages:

    Reusable
    Most commonly used
    Best practice

    Disadvantages:

    Lower priority than ID

    ID Selector (#)

    What is it ?

    Selects a unique element using id.

ID Selector (#) Syntax

An ID Selector selects a unique HTML element using its id attribute and applies CSS styles specifically to that single element. 

#idname {
    property: value;
}

ID Selector Example

This code uses an ID selector to style the heading with the id "mainHeading", changing its text color to dark blue. 

<h1 id="mainHeading">Welcome</h1>

#mainHeading {
    color: darkblue;
}

  • ID must be unique

    ID selector = Calling a person by name

    “Rahul, come here.”

    Warning:

    Do NOT reuse IDs

    Avoid overusing IDs

    Attribute Selector [ ]

    What is it ?

    Selects elements based on attributes & values.

Attribute Selector [ ]

An Attribute Selector selects HTML elements based on specific attributes and their values, and applies CSS styles to those matching elements. 

input[type="password"] {
    border: 2px solid red;
}

a[target="_blank"] {
    color: green;
}

  • Universal Selector (*)

    What is it ?

    Selects ALL elements.

Universal Selector (*)

The Universal Selector selects all HTML elements on the page and applies the specified CSS styles to every element. 

* {
    margin: 0;
    padding: 0;
}

  • Used for CSS reset

    Warning:

    Can affect performance
    Use carefully

    Group Selector (,)

    What is it ?

    Apply same style to multiple selectors.

Group Selector (,)

A Group Selector is used to apply the same CSS styles to multiple selectors by separating them with commas. 

h1, h2, p {
    color: teal;
}

  • Saves time

    Combinators (Relationship Selectors)

    Selectors based on HTML structure

    Descendant Selector (space)

    Used to select elements that live inside another element
    It applies styles to all matching inner elements, no matter how deep they are nested

Descendant Selector

This CSS code selects all p elements that are inside a div element and changes their text color to red. 

div p {
    color: red;
}

  • ✔ <p> inside <div>

    Child Selector (>)

    Child Selector ( > ) is used to select elements that are direct children of a parent element.

    It applies styles only one level down, not to deeper nested elements

Child Selector

This CSS code selects all p elements that are direct children of a div element and changes their text color to blue. 

div > p {
    color: blue;
}

  • Direct child only

    Adjacent Sibling (+)

    Adjacent Sibling Selector ( + ) is used to select an element that comes immediately after another element
    It applies styles only to the very next sibling, not to all following ones

Adjacent Sibling Selector

This CSS code selects the first p element that comes immediately after an h1 element and changes its text color to green. 

h1 + p {
    color: green;
}

  • First <p> after <h1>

    General Sibling (~)

    General Sibling Selector ( ~ ) selects all matching sibling elements that appear after a given element.
    It applies styles to every following sibling, not just the next one.

General Sibling Selector

This CSS code selects all p elements that come after an h1 element (as siblings) and changes their text color to orange. 

h1 ~ p {
    color: orange;
}

  • Combinators = Family relationships 

    Pseudo-Classes (:)

    What is it ?

    Style elements in a specific state.

    Common Pseudo-Classes:

    :hover

    Applies styles when the user moves the mouse over an element
    Adds a smooth, interactive effect that reacts to user movement

    :focus
    Applies styles when an element is selected or ready for input 
    Clearly highlights the active field for better user experience 

    :active
    Applies styles when an element is clicked or pressed
    Gives instant visual feedback to user actions

    :nth-child()
    Selects elements based on their position among sibling elements
    Helps create attractive patterns, layouts, and design rhythm 

    These pseudo-classes make interfaces feel alive, responsive, and user-friendly
    They are essential for modern UI interactions

Pseudo-Classes (:)

Pseudo-classes style elements based on their state or position. 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Hover */
    button:hover {
      background-color: orange;
      color: white;
    }
    /* Focus */
    input:focus {
      border: 2px solid blue;
      outline: none;
    }
    /* Active */
    button:active {
      background-color: red;
    }
    /* nth-child */
    li:nth-child(2) {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <button>Hover / Click Me</button><br><br>
  <input type="text" placeholder="Click here"><br><br>
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>

</body>
</html>

  • Pseudo-Elements (::)

    What is it ?

    Style specific parts of an element.

    ::before
    Adds content before an element’s actual content
    Mostly used for icons, symbols, or decorative text using  CSS

    ::after
    Adds content after an element’s actual content
    Commonly used for styling effects or extra symbols 

    ::first-letter
    Selects and styles the first letter of a text
    Often used for drop caps or special text effects

    ::first-line
    Selects and styles only the first line of a paragraph
    Useful for highlighting the opening line of text

Pseudo-Elements (::)

Pseudo-elements are used to style specific parts of an element, such as the first letter, first line, or content added before or after the element. 

<!DOCTYPE html>
<html>
<head>
  <style>
    /* before */
    h2::before {
      content: "★ ";
      color: orange;
    }
    /* after */
    h2::after {
      content: " ★";
      color: orange;
    }
    /* first-letter */
    p::first-letter {
      font-size: 30px;
      color: red;
      font-weight: bold;
    }
    /* first-line */
    p::first-line {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Welcome to CSS</h2>
  <p>
    CSS makes websites beautiful and stylish.
    It helps in designing layouts, colors, and effects.
  </p>
</body>
</html>

  • CSS Selector Priority (Specificity)

    When multiple selectors target the same element:

    Priority Order:

    Inline > ID > Class > Element

CSS Selector Priority (Specificity)

CSS Specificity determines which style is applied when multiple selectors target the same element. 

p { color: blue; }
.text { color: green; }
#para { color: red; }

  • Final color → RED 

    Best Practices

    Prefer class selectors
    Avoid deep nesting
    Avoid too many IDs
    Keep selectors readable
❮ Previous Next ❯