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