The Different Types of CSS Selectors and Their Weights

The Universal Selector

* {
color: blue;
}

The Element Selector

p {
color: red;
}

The Class Selector

<div class="new-dev">For all new devs</div>
.new-dev {  
color: orange;
font-size: 12rem;
}

The Multiple Classes Selector

<div class="rachel ross monica joey phoebe chandler ">I Love FRIENDS</div>
.rachel {  
color: green;

}
.ross {  
font-size: 16rem;

}

The Pseudo-Class Selector

<h1>Can this be anymore difficult?!</h1>  
<h1>I know!/h1>
<h1>I am Psuedo class</h1>
h1:last-child {  
color: olive;
}

The ID Selector

<p id="central-perk">I have an ID. It's called 'central-perk', and there is no other ID with my name.</p>
#central-perk {  
color: black;
}

The !important Selector

h2 {
color: blue !important;
font-size: 14px !important;
}

--

--

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