What are different types of Selectors in CSS?
Tags: webdev, beginners, css
Published: 2020-09-04 16:56:26

<span>Photo by <a href="https://unsplash.com/@nickkarvounis?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Nick Karvounis</a> on <a href="https://unsplash.com/s/photos/css?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

---

One of the complicated parts of CSS declarations is coming with proper selectors we want to apply the style for. Understanding how these selectors work is a great first step in designing a professional looking website. There are multiple ways to select an element for applying styles in CSS. This article attempts to list some of the common selectors with an explanation.

<h3>What are Selectors?</h3>
Selectors identify elements getting styled in a CSS declaration. In a CSS declaration, selectors are the initial portion that come before curly braces. For example, **section** HTML element is the selector in the below declaration.  
```css
section {
   font-size: 1rem;
   padding: 0.5rem;
   margin: 0.5rem;
 }
```

<h3>What is a DOM?</h3>
Before getting into details on common types of CSS Selectors, one must understand how the browsers interpret the HTML page. Browsers try to interpret the contents of the HTML page by parsing them into a DOM. **DOM** stands for **D**ocument **O**bject **M**odel. Quick explanation of DOM can be found <a href="https://css-tricks.com/dom/">here</a>.

<h3>Different types of Selectors</h3>
Below are some of the most common types of CSS Selectors.

<h4>Universal Selectors</h4>
Styles applied using universal selectors are applied to all elements on the HTML page. Applying styles this way is considered inefficient as browsers have to parse all elements in the HTML document to apply the style for.
```css
* {
   color: red; 	
 }
```

<h4>Element Selectors</h4>
HTML elements can be styled using their tag names. With the below CSS, all `<h2>` tags would be rendered in red color. 
```css
h2 {
   color: red; 	
 }
```

<h4>Class Selectors</h4>
Class selectors are useful if similar styles need to be applied to different parts of the application. Class selectors are defined using `.` followed by the `class name` like shown below:  
```css
.a-class {
   color: red; 	
 }
```

<h4>ID Selectors</h4>
Id attribute in HTML is used to uniquely identify an HTML element. These ids could also be used to style an element using `#` followed by the `id`.
```css
#my-id {
   color: red; 	
 }
```

<h4>Attribute Selectors</h4>
HTML elements could be styled based on the presence of an attribute using the Attribute selector. For example below declaration would add border to any element with `disabled` attribute. 
```css
[disabled] {
   border: 2px solid black; 	
 }
```

<h4>Group Selectors</h4>
If more than one class or element share the same styles they could be comma separated and defined with a single declaration to avoid duplication. 
```css
#my-id, 
.b-class {
   color: red; 	
 }
```

<h4>Compound Selectors</h4>
If we want to style only a specific element containing a named class, we could use a compund selector. With the below style declaration, only `div` elements with class `a-class` would be styled. Below style will not be applied if an `<h1>` element happens to have the same `a-class`.   
```css
div.a-class {
   color: red; 	
 }
```

<h4>Descendant Selectors</h4> 
All elements that are nested inside a given element are called descendants. For example, with the below selector we can style all paragraph elements that are nested in the `<body>` tag. 
```css
body p {
   color: red; 	
 }
```

<h4>Parent Child Selectors</h4> 
Parent Child selector is a little more specific than the descendant selector. It only styles the elements that are direct children of the selector defined on the left side. Below declaration applies only to anchor tags that are immediate children of paragraph tag. If `<a>` tag happens to be nested inside another `<span>` tag it will not receive the style.  
```css
p > a {
   color: blue; 	
 }
```

<h4>General Sibling Selectors</h4> 
General sibling selectors help style all siblings that are defined after the given selection. With the below selector one can style all paragraph elements that are defined after the `<div>` and are siblings of the `<div>` element. 
```css
div ~ p {
   color: red; 	
 }
```

<h4>Adjacent Sibling Selectors</h4> 
Adjacent sibling selector styling is similar to the general sibling selector except style will be applied to only the sibling that comes right after the selector. 
```css
div + p {
   color: red; 	
 }
```

<h4>Pseudo Class Selectors</h4> 
Pseudo class selectors help in styling a given state of an element. Below styles get applied when a user hovers over an anchor tag.
```css
a:hover {
   color: red;
   text-decoration: none; 	
 }
```

<h4>Pseudo Element Selectors</h4>
Pseudo element selectors help style part of an element. Pseudo elements styling is declared using `::` in CSS3. Below selector styles all paragraph elements’ first line. 
```css
   p::first-line {
      color: red;
   }
```

<h3>Final Thoughts</h3>
Getting comfortable with CSS selectors would help in coming up with precise CSS declaration that aims to style desired parts of the web page in a professional way. This would also help in avoiding making a lot of costly styling mistakes.