CSS Series

15 CSS Selectors You Should Know!

15 CSS Selectors You Should Know!

I’m going to show you the most used CSS selectors, yes! 15 of them! Simply, easy, few words, so, go get them, tiger!!

1) * (Asterisk)

Starting from the most basic, the asterisk! This selector is going to match with all elements in DOM

All Selector — css tips and tricks 2020
All Selector

2) # (ID)

The ID selector, it will match with the ID you assign to an element. Just be carefully ID selector should be not reused.

ID Selector — css tips and tricks 2020
ID Selector

3). (Class)

The Class selector can be used when you want to style a group of elements.

Class selector- css tips and tricks 2020
Class Selector

4) elem1 elem2 (Descendant)

The descendant selector is used when you need to be more specific with your selectors. For example, if you need to select all the OL inside a DIV, how do you do it? This is the right way…

Descendant Selector- css tips and tricks 2020
Descendant Selector

5) elem (Type)

If you need to select all elements by type, this is your salvation, it will get every element with the type you want.

Type Selector- css tips and tricks 2020
Type Selector

6) elem1 + elem2 (Adjacent)

The adjacent selector. It will select only the elem2 that is immediately preceded by the elem1.

Adjacent Selector - css tips and tricks 2020
Adjacent Selector

7) elem1 > elem2 (Child)

This selector will just select elem2 that are direct child of elem1.

Child Selector — css tips and tricks 2020
Child Selector

8) elem1 ~ elem2 (Sibling)

The sibling selector will select all elem2 behind elem1

Sibling Selector — css tips and tricks 2020
Sibling Selector

9) elem[attr] (Attribute)

The attribute selector adds more specificity to the css, so, if you need, for example, select all elem with some specific attribute, this is your salvation.

By Attribute - css tips and tricks 2020
Attribute

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

So, if you have a group of elements with attributes, and you want to select just that element with a full matching attribute, you should use this (and the following six variation)

By Attribute — css tips and tricks 2020
Attribute

11) elem[href*=’google’]

Same as 10, but now it's going to match to all those who has ‘google’ inside.

By Attribute — css tips and tricks 2020
Attribute

12) elem[href^=’https’]

Same as 10/11, but now it’s going to match to all those who starts with ‘https’.

By Attribute — css tips and tricks 2020
Attribute

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

Same as 10/11/12, but now it’s going to match to all those who end with ‘.com’.

By Attribute — css tips and tricks 2020
Attribute

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

Custom data attributes will be another way to affect just one or a few from a bigger group of same elements.

By Data Attribute — css tips and tricks 2020
Data Attribute

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

Like the previous example, but now if your custom data attribute has more tan a value, you can make it match with just one value.

By Data Attribute — css tips and tricks 2020
Data Attribute

This is all folks!!
As I always say
Hope this helps!

--

--

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
{ JS } Guy

{ JS } Guy

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