Skip to main content

Introduction to selectors

CSS (Cascading Style Sheets) selectors are patterns used to select the HTML elements you want to style. They are fundamental to applying styles effectively and efficiently. Here's an introduction to CSS selectors with some interesting examples:

Basic Selectors

  1. Universal Selector (*)

    • Selects all elements.
    * {
    margin: 0;
    padding: 0;
}

  2. Type Selector

    • Selects all elements of a given type.
    p {
    color: blue;
}

  3. Class Selector (.)

    • Selects all elements with a specific class attribute.
    .highlight {
    background-color: yellow;
}

  4. ID Selector (#)

    • Selects an element with a specific ID attribute.
    #header {
    font-size: 24px;
}

Attribute Selectors

  1. Attribute Selector ([attribute])

    • Selects elements with a specific attribute.
    [data-role="button"] {
    cursor: pointer;
}

  2. Attribute Value Selector ([attribute="value"])

    • Selects elements with a specific attribute value.
    [type="text"] {
    border: 1px solid black;
}

Pseudo-Classes

  1. Pseudo-Classes (:)

    • Selects elements based on their state.
    a:hover {
    color: red;
}

  2. First Child (:first-child)

    • Selects the first child of a parent element.
    p:first-child {
    font-weight: bold;
}

  3. Nth Child (:nth-child(n))

    • Selects the nth child of a parent element.
    li:nth-child(odd) {
    background-color: lightgray;
}

Combinators

  1. Descendant Combinator ( )

    • Selects all elements that are descendants of a specified element.
    div p {
    color: green;
}

  2. Child Combinator (>)

    • Selects all direct children of a specified element.
    ul > li {
    list-style-type: none;
}

  3. Adjacent Sibling Combinator (+)

    • Selects the element that is immediately adjacent to a specified element.
    h1 + p {
    margin-top: 0;
}

  4. General Sibling Combinator (~)

    • Selects all siblings of a specified element.
    h1 ~ p {
    color: blue;
}

Pseudo-Elements

  1. Pseudo-Elements (::)

    • Selects a specific part of an element.
    p::first-line {
    font-weight: bold;
}

  2. Before and After (::before and ::after)

    • Inserts content before or after an element's content.
    p::before {
    content: "Note: ";
    font-weight: bold;
}

Interesting Examples

  1. Styling Odd and Even Rows in a Table

    tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #ffffff;
}

  2. Styling the First Letter of a Paragraph

    p::first-letter {
    font-size: 200%;
    color: red;
}

  3. Styling Form Inputs Differently Based on Type

    input[type="text"] {
    border: 1px solid blue;
}

input[type="submit"] {
    background-color: green;
    color: white;
}

  4. Styling Links Differently Based on Their State

    a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: orange;
}

CSS selectors are powerful tools that allow you to target specific elements and apply styles precisely. Understanding and using them effectively can greatly enhance the design and functionality of your web pages.

No comments to display

Back to top