CSS Selectors

Overview

CSS selectors are patterns used to select and style HTML elements. Understanding selectors is fundamental to writing effective CSS.

Basic Selectors

Element Selector

p {
    color: blue;
}

Class Selector

.highlight {
    background-color: yellow;
}

ID Selector

#header {
    font-size: 24px;
}

Combination Selectors

Descendant Selector

div p {
    margin: 10px;
}

Child Selector

ul > li {
    list-style-type: none;
}

Adjacent Sibling Selector

h1 + p {
    margin-top: 0;
}

Attribute Selectors

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

a[href^="https"] {
    color: green;
}

Pseudo-classes

a:hover {
    color: red;
}

li:first-child {
    font-weight: bold;
}