Thread by @thearslankhalid

A 🧵about CSS Selectors:

Going from Easy -> Complex...

👇

These are the commonly used CSS selectors:

1. Universal Selector ( * )

2. Element Selector ( p , a , div , ... )

3. Class Selector ( .my-class )

4. Id Selector ( #CSS 😉)

👇

5. Attribute Selectors

👇

Attribute Selectors with Regular Expressions (Regex):

Crazy right. Let's explore.

👇

6. Complex Selectors

They use different combinators like:

a. Descendant combinator ( space )

b. Child combinator ( > )

c. Sibling combinator ( + )

d. Subsequent combinator ( ~ )

Let's see what they do:

👇

Note:

The descendant combinator (space) is recursive. For example:
ul li {...}
will style all the 'li' elements inside 'ul' even if the 'li' does not have 'ul' as direct parent.

Use it with caution!

It is advised to use child combinator ( > ) to avoid recursive styling.

👇

7. Compound Selectors

As the name suggests they are a combination of different selectors.

Let's see it in practice.

👇

Last but not least!

The Rulers of the Phantom World:

Pseudo Elements and Pseudo Classes.

They deserve a thread of their own but here's a teaser:

👇

These are the selectors available at your disposal to make wonderful experiences on the world wide web.

Go make something beautiful.

Thanks for reading.

More coming in the pipeline. Stay tuned.