What are CSS Selectors?

CSS Selectors are the ones that select the HTML element you want to style. CSS Selectors select the HTML element based on its id, class or attribute.

Basic Selector

Universal Selectors:

The * symbol is used to select every element on the page. Most developers want to reset their margin and padding to 0 so they can remove the margin and padding that the browser has provided by default. It is helpful in being consistent across different browsers when visiting a website.

Syntax

*{
      //Style your element
 }

HTML

<body>
<h1>Example of Universal Selector</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

CSS

*{
  background: black;
  color: white;
  font-family: 'Poppins';
}

h1{
  text-align: center;
}

https://codepen.io/anupam-kumar-krishnan/pen/ExEXQbj

Class Selectors:

Class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute.

Syntax

.class {
    // CSS property
}

HTML

<body>
<div class="intro">
  <p>My name is Donald.</p>
  <p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p class="intro">My best friend is Mickey.</p>
</body>

CSS

.intro{
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/GRxvKGO

Id Selectors:

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Syntax

#idname {
  //style properties 
}

HTML

<body>
  <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

CSS

.paragraph{
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/YzaxKJQ

Type Selectors:

A type selector is sometimes referred to as a tag name selector or element selector because it selects an HTML tag/element in your document.

Syntax

element{
//style your element
}

HTML

<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>

CSS

span{
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/RwMZbvj

Grouping Selectors

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

Syntax

element, element{
//style your element
}

HTML

<body>
<h1>Example of Grouping Selector</h1>
<p>Example of CSS selector.</p> 
<h4>Example of grouping of CSS selectors.</h4> 
</body>

CSS

h1{
  text-align: center;
}

p,h4{
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/YzaxzyY

Combinators

A combinator is something that explains the relationship between the selectors. There are four different combinators in CSS:

Descendant Selector (space)
Child Selector (>)
Adjacent Sibling Selector (+)
General Sibling Selector (~)

Descendant Combinator(Space)

The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.

Syntax

selector1 selector2 {
  /* property declarations */
}

HTML

<body>
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>

CSS

div p{
background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/yLKoLoY

Child Combinator(>)

Child Combinator uses the greater than (>) sign as the separator between the elements. It selects the direct descendant of the parent. This combinator only matches the elements that are the immediate child in the document tree. It is stricter as compared to the descendant selector because it selects the second selector only when the first selector is its parent.

Syntax

selector1 > selector2 
{
   //style properties 
}

HTML

<body>
<h1>Example of Child Combinator</h1>

<p>The child selector (>) selects all elements that are the children of a specified element.</p>

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

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>

CSS

div>p{
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/KKovKod

Adjacent Sibling Combinator(+)

Adjacent Sibling Combinator uses the plus (+) sign as the separator between the elements. It matches the second element only when the element immediately follows the first element, and both of them are children of the same parent. This sibling selector selects the adjacent element, or we can say that the element is next to the specified tag.

Syntax

former_element + target_element 
{
   // style properties 
}

HTML

<body>

<h1>Example of Adjacent Sibling Selector</h1>

<p>The + selector is used to select an element that is directly after another specific element.</p>

<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>

CSS

div + p {
  background: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/NWYvqaM

General Sibling Combinator(~)

General Sibling Combinator uses the tlide (~) sign as the separator between the elements. It selects the elements that follow the elements of the first selector, and both of them are children of the same parent. It can be used for selecting the group of elements that share the common parent element.

Syntax

former_element ~ target_element 
{
     // style properties 
}

HTML

<body>

<h1>Example of General Sibling Combinator</h1>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

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

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>

CSS

div ~ p {
  background-color: skyblue;
}

https://codepen.io/anupam-kumar-krishnan/pen/bGvrdMK

Pseudo Selectors

Pseudo Classes `:`

The : works if the element's state changes by the interaction by the user.
Syntax

selector:pseudo-class 
{
    // property: value;
}

Commonly used Pseudo classes are:

:focus
:required
:checked
:disabled
:hover
:visited
:active

These pseudo-classes relate to the location of an element within the document tree.

:root
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:not(selector)

Pseudo Elements `::`

The :: is used to style a specific part of the selected element.
Syntax

selector::pseudo-element 
{
  // property: value;
}

Commonly used Pseudo Elements are:

::after
::before
::first-line
::first-letter (:first-letter)
::first-line (:first-line)
::file-selector-button

Attribute Selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

[attr] Represents elements with an attribute name of attr.
[attr=value] Represents elements with an attribute name of attr whose value is exactly value.
[attr~=value] Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exact value.
[attr|=value] Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen. It is often used for language subcode matches.
[attr^=value] Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
[attr$=value] Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
[attr*=value] Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
[attr operator value i] Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Hope you have enjoyed🎉 learning about the CSS Selectors✨!
Will come up with something new next time🚀, till then Keep Learning, Keep Exploring✨

Anupam Kumar Krishnan's Blog

Anupam Kumar Krishnan's Blog

CSS Selector: All You Need To Know

A Detailed Guide on CSS Selector with code examples

Table of contents

What are CSS Selectors?

Basic Selector

Universal Selectors:

Class Selectors:

Id Selectors:

Type Selectors:

Grouping Selectors

Combinators

Descendant Combinator(Space)

Child Combinator(>)

Adjacent Sibling Combinator(+)

General Sibling Combinator(~)

Pseudo Selectors

Pseudo Classes `:`

Pseudo Elements `::`

Attribute Selectors

CSS Selector: All You Need To Know

A Detailed Guide on CSS Selector with code examples

Table of contents

What are CSS Selectors?

Basic Selector

Universal Selectors:

Class Selectors:

Id Selectors:

Type Selectors:

Grouping Selectors

Combinators

Descendant Combinator(Space)

Child Combinator(>)

Adjacent Sibling Combinator(+)

General Sibling Combinator(~)

Pseudo Selectors

Pseudo Classes :

Pseudo Elements ::

Attribute Selectors

Pseudo Classes `:`

Pseudo Elements `::`