Thread by @UbahTheBuilder

7 Popular CSS Selectors To Know

A thread 🧵

🔹Universal Selector

The universal selector matches all the elements in a HTML document

It is represented by an asterisk (*)

* {
...
}

🔹Type Selector

The type selector matches all the elements specified in a comma- delimited list.

It allows you specify the same styles to several elements

h1, h2, h3 {
...
}

🔹Class Selector

The class selector allows you to match a rule with element(s) carrying a class attribute whose value matches the one you specify in the class selector.

this...

.main {
...
}

🔹Id Selector

The class selector allows you to match a rule with an element carrying an id attribute whose value matches the one you specify in the class selector.

this...

#main {
...
}

🔹Child Selector

The child selector matches an element that is a direct child of another.

In this case it matches any < b > elements that are direct children of < td > elements

td > b {
...
}

🔹The Descendant Selector

This matches an element that is a descendant of another specified element (or nested inside another specified element), not just a direct child.

table b {
...
}

Here, it matches any element that is a child of the element

🔹Adjacent Selector

An adjacent sibling selector matches an element type that is the next sibling of another.

If you want to make the first paragraph after any h1 a different style from other elements you can use the adjacent sibling selector like so:

h1+p {
...
}

These selectors offer you good ways to reference your elements.

If you liked this thread, follow me 👉 @UbahTheBuilder for similar ones on web development.

Also, you might want to check out this course:

gumroad.com/a/834147443