CSS Selectors

Selectors are used to target HTML elements you want to style. Common types include:

Element Selector: Targets all elements of a specific type.

p {
    color: green;
}

Try it Yourself

Class Selector: Targets elements with a specific class attribute.

.className {
    color: blue;
}

Try it Yourself

ID Selector: Targets an element with a specific ID attribute.

#idname {
    color: green;
}

Try it Yourself

Universal Selector: Targets all elements.

* {
    color: blue;
}

Try it Yourself

Attribute Selector: Targets elements with a specific attribute.

[type="text"] {
    border: 2px solid black;
}

Try it Yourself

Pseudo-class Selector: Targets elements in a specific state.

a:hover {
    color: green;
}

Try it Yourself

Properties and Values

body {
    background-color: lightblue;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

Combining Selectors

Selectors can be combined to target elements more precisely.

Descendant Selector: Targets elements that are descendants of a specified element.

div p {
    color: green;
}

Try it Yourself

Child Selector: Targets direct child elements of a specified element.

div > p {
    color: blue;
}

Try it Yourself