CSS Selectors

Element Selector

div {
    color: green;
    font-size: 2em;
}

Class Selector

.class {
    color: red;
    font-size: 2em;
}

ID Selector

#id {
    color: blue;
    font-size: 1em;
}

Universal Selector

* {
    color: green;
    font-size: 2em;
}

Note

The universal selector selects all HTML elements.

Advanced Selectors

Note: All Selector Patterns can be found at w3schools.com.

Grouping Selector

div,
p {
    color: green;
    font-size: 2em;
}

Descendant Selector

div p {
    color: green;
    font-size: 2em;
}

Note

Styles are only applied to the last element which are in the hierarchy.

Attribute Selector

<a href="www.google.com">Google</a>
<a href="www.google.com" target="_blank">Google</a>

a[target] {
    color: green;
}

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

• [attribute] selects all elements with this attribute name
• [attribute="value"] selects all elements with this attribute name and value
• [attribute~="value"] selects all elements with this attribute name and value (separated by spaces)

Note: More Patterns can be found at w3schools.com.

---