CSS Selectors

What are CSS Selectors?

CSS selectors are patterns used to select the element(s) you want to style. They are a fundamental part of CSS and allow you to target specific HTML elements.

Element Selector

Selects all elements of a specific type:

p {
    color: blue;
}

ID Selector

Selects an element with a specific ID (use #):

#header {
    background-color: #4b3190;
}

Class Selector

Selects all elements with a specific class (use .):

.intro {
    font-size: 18px;
    font-weight: bold;
}

Universal Selector

Selects all elements (use *):

* {
    margin: 0;
    padding: 0;
}

Grouping Selectors

Select multiple elements and apply the same styles:

h1, h2, h3 {
    color: #4b3190;
    font-family: Arial;
}

Descendant Selector

Selects elements that are descendants of a specified element:

div p {
    color: red;
}

Child Selector

Selects direct children of an element (use >):

div > p {
    color: blue;
}

Attribute Selector

Selects elements based on attributes:

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

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

Pseudo-classes

Select elements in a specific state:

a:hover {
    color: #fdbb30;
}

button:active {
    background-color: #4b3190;
}

input:focus {
    border-color: #4b3190;
}

Pseudo-elements

Style specific parts of an element:

p::first-line {
    font-weight: bold;
}

p::before {
    content: "Note: ";
    color: red;
}