CSS Series

15 CSS Selectors You Should Know!

From * to custom data attributes

15 CSS Selectors You Should Know!
15 CSS Selectors You Should Know!

1) * (Asterisk)

All Selector — css tips and tricks 2020
All Selector

2) # (ID)

ID Selector — css tips and tricks 2020
ID Selector

3). (Class)

Class selector- css tips and tricks 2020
Class Selector

4) elem1 elem2 (Descendant)

Descendant Selector- css tips and tricks 2020
Descendant Selector

5) elem (Type)

Type Selector- css tips and tricks 2020
Type Selector

6) elem1 + elem2 (Adjacent)

Adjacent Selector - css tips and tricks 2020
Adjacent Selector

7) elem1 > elem2 (Child)

Child Selector — css tips and tricks 2020
Child Selector

8) elem1 ~ elem2 (Sibling)

Sibling Selector — css tips and tricks 2020
Sibling Selector

9) elem[attr] (Attribute)

By Attribute - css tips and tricks 2020
Attribute

10) elem[href=’google’] (Attribute)

By Attribute — css tips and tricks 2020
Attribute

11) elem[href*=’google’]

By Attribute — css tips and tricks 2020
Attribute

12) elem[href^=’https’]

By Attribute — css tips and tricks 2020
Attribute

13) elem[href$=’.com’]

By Attribute — css tips and tricks 2020
Attribute

14) elem[data-attribute=’foo’]

By Data Attribute — css tips and tricks 2020
Data Attribute

15) elem[data-attribute~=’bar’]

By Data Attribute — css tips and tricks 2020
Data Attribute

Just a web UI developer, with more than 10 years experience, trying to share my own personal knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store