CSS Selector

CSS selectors are patterns used to select and style HTML elements.

They determine which elements in the HTML document will be affected by the CSS rules.

Element Selector:

Selects all instances of a specific HTML element.

p {
    color: blue;
}

#header {
    background-color: green;
}

Selects an element with a specific ID attribute.

.highlight {
    font-weight: bold;
}

Universal Selector:

Selects elements with a specific class attribute.

div p {
    font-style: italic;
}

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

Selects all elements in the document.

h2 + p {
    color: blue;
}

a:hover {
    color: blue;
}

li:nth-child(odd) {
    background-color: #f5f5f5;
}

Selects an element that is a descendant of another specified element.

Selects elements based on their attributes.

Selects an element that is directly adjacent to another specified element.

Selects elements based on their state or position in the document.