Jun 22, 20212 min read

What are CSS Selectors? What are different types of selectors in CSS with Example.

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

The CSS Selector contain more than one selector, which is also called as a CSS Combinators.

In CSS there are different types of Selectors or Combinators, which are listed below:

Descendant Selectors
Child Selector
Adjacent Sibling Selector
General Sibling Selectors
Group Selectors
Universal Selectors

Descendant Selectors:

This us used to select all elements that are descendants of specific element.

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: pink;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<div>
  <p>Paragraph 1 inside div.</p>
  <p>Paragraph 2 inside div.</p>
  <p>Paragraph 3 inside div.</p>
</div>

<p>Paragraph 4 outside div.</p>
<p>Paragraph 5 outside div.</p>

</body>
</html>

Child Selector:

child Selector identifying "p" elements that fall within "div" element.

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: pink;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<div>
  <p>Paragraph 1 inside div.</p>
  <p>Paragraph 2 inside div.</p>
  <section><p>Paragraph 3 inside div (not Child but Descendant).</p></section> 
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5 outside div.</p>
<div>
<section><p>Paragraph 6 inside div.</p></section>
<p>Paragraph 7 inside div </p>
</div>


</body>
</html>

Adjacent Sibling Selector:

This is used to select element that is directly after another specific element.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: pink;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>

General Sibling Selector:

This is used to select all elements that are next sibling of specified element.

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>hello!</code>
<p>Paragraph 4.</p>
<p>Paragraoh 5.</p>

</body>
</html

Group Selector:

This us used to select the elements with the same style definition.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    text-align: Center;
    color: blue;
   }

h3,h4{
	text-align:Center;
    color:green;
    }
    
</style>
</head>
<body>
<h1>The Tech Platform</h1>
<h2>Welcome to The Tech Platform</h2>
<p>www.thetechplatform</p>
<br>
<h3>The Tech Platform</h3>
<h4>Welcome to The Tech Platform</h4>
<br>
<br>
<h1>The Tech Platform</h1>
<h3>Welcome to The Tech Platform</h3>
<p>www.thetechplatform.com </p>
</body>
</html>

Universal Selector:

This is used to select all the elements on the page.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
* {  
   color: Blue;  
   font-size: 30px;  
}   
</style>  
</head>  
<body>  
<h2>This is heading</h2>  
<p>This is applied on every paragraph.</p>  
<p id="one">Hello!</p>  
<p>How are you?</p>  
</body>  
</html>>