Mastering CSS Selectors: A Guide to Styling Your Website

CSS selectors are an essential part of styling HTML elements on a webpage. They allow you to target specific elements and apply styles to them. In this article, we will explore the different types of CSS selectors, including element selectors, class selectors, ID selectors, and more. By the end of this article, you will have a better understanding of how to use CSS selectors to style your website and make it more visually appealing.

Here are the different type of css selectors:

⚡Element Selector :

• Select elements based on their tag name, such as "p" for paragraphs or "h1" for headings.

h1{
      font-size : 12px;
}

⚡Group Selector :

• A group selector is used to group multiple selectors into a single rule set.

• This allows you to apply the same styles to multiple elements without having to repeat the CSS code.

<p>This is a paragraph.</p>
<div>This is a div.</div>
<span>This is a span.</span>

CSS

p,div,span{
      color : red;
}

⚡Class Selector :

• Class selector is used to select HTML elements that have a specific class attribute.

• You can select and style multiple elements with same calss name.

• We use(.) to access classname in CSS, class selectors are more powerful than element selector.

.para{
      color : red;
}

⚡ID Selector :

• ID selector is used to select a specific HTML element based on its unique id attribute.

• There can be multiple class with same class name but Id's are unique.

• We add (#) before id name to style HTML element, it is more powerful than class selector.

#elm{
      font-size : 12px;
}

⚡Universal Selector :

• It is used to select all the elements on the webpage.

• It is represented by an asterisk '*'

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

⚡Descendent Selector :

• Descendant selectors are a type of CSS selector that targets elements that are descendants of a specific parent element.

<div class="parent">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

.parent ul li {
  /* styles */
}

⚡Direct Child Selector

• The direct child selector is a CSS selector that targets only the immediate children of an element.

• It is represented by ">" symbol.

<div class="parent">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

ul > li {
  /* styles */
}

⚡Adjacent Sibling selector :

• It targets an element that immediately follows another element and shares the same parent element.

• It is represented by the plus sign (+) symbol.

• For example, if you want to select and style the second paragraph element that immediately follows the first paragraph element, you can use the adjacent sibling selector like this:

div + p{
  color : black; 
}

⚡Attribute Selector :

Attribute selector is used to select HTML elements based on the value of an attribute.

there are different type of attribute selector that you can use.

• [attribute=value] - selects all elements that have the specified attribute with a value that exactly matches the specified value, In CSS, it's not necessary to use double quotes(" ").

input[type="text"] {
  border: 1px solid red;
}

• [attribute^=value] - selects all elements that have the specified attribute with a value that starts with the specified value.

<div class="box-s">This is a div.</div>
<div class="box-t">This is a div.</div>
<div class="box-p">This is a div.</div>

[class^="box"] {
  margin : 12px; 
}

• [attribute$=value] - selects all elements that have the specified attribute with a value that ends with the specified value.

<p class="para-top">This is a paragraph.</p>
<div class="box-top">This is a div.</div>
<span class="norm-top">This is a span.</span>

[class$="top"] {
  margin-top : 2em; 
}

⚡Pseudo element selector :

• pseudo-class selectors are used to target and style elements based on their state or position within the HTML document.

• Pseudo-class selectors begin with a colon (:) and are followed by the name of the pseudo-class.

Here are some commonly used pseudo-class selectors:

1. :hover

It is used to apply styles to an element when the user hovers over it with their mouse.

a:hover {
      color:red;
}

1. :visited

visited pseudo-class selector is used to select and style links that have been visited by the user.

a:visited {
  color: purple;
  text-decoration: line-through;
}

1. :active

It applies styles to an element when it is being clicked or activated.

a:active {
  color: purple;
}

1. :focus

It applies styles to an element that has focus, such as when it is selected using the Tab key.

a:focus {
  color: purple;
}

1. :first-child

It applies styles to the first child element of a parent element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li:first-child{
  font-weight: bold;}

1. :last-child

It applies styles to the last child element of a parent element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li:last-child{
  color : black; 
}

1. nth-child()

It selects elements based on their position relative to their parent element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

/* Select and style the first list item */
li:nth-child(1) {
  color: red;
}

/* Select and style every other list item starting with the second one */
li:nth-child(2n+2) {
  color: blue;
}

/* Select and style the last list item */
li:nth-child(5) {
  color: green;
}

Additional Resources :

W3Schools

freeCodeCamp

Tutorialspoint

GeeksforGeeks