CSS Selectors Part 1

In CSS, selectors are used to select the elements that you want to style.

In this reference, I’m going to list some basic selectors and provide examples.

Type Selector

A

Selects all elements of type A.

For example, to select all <div> elements:

div { 
}

And to select all <p> elements:

p {
}

ID Selector

#id

Selects elements with a specified ID.

To select elements that have an ID of “post”:

#post {
}

The ID selector can be combined with the type selector as well.

To select all <li> elements that have an ID of “post”:

li#post {
}

Descendant Selector

A B

Selects all B inside of A.

To select all the <p> elements within a <div>:

div p {
}

To select all <a> elements within an element with a “post” id:

#post a {
}

Class Selector

.class

Selects elements with a specified class.

To select all <p> elements with the class “important”:

p.important {
}

To select all elements with the id “post” and class “sharable”:

#post.sharable {
}

Comma Combination

A, B

You can combine selections using a comma.

To select all <p> and all <div> elements:

p, div {
}

To select all elements with a “post” id, all <a> elements, and all <span> elements:

#post, a, span {
}

Universal Selector

*

To select all elements:

* {
}

To select all elements within an element with id “post”:

#post * {
}

That’s all for now! You can do a lot with selecting by type, id, class, and descendants.

However, CSS is super powerful and extends itself far beyond what I’ve covered here.

In the next post, I’ll provide examples for sibling and child selectors.