CSS selector

CSS selector is used to target/select the HTML element so we can style or modify it.

There are several ways to select elements - using HTML tag, class, and id.

Example:

<html lang="en">
<head>
    <title>Document</title>
    <style>
        body{
            background-color: #CAD5E2;
        }
        .heading{
            color: #03203C;
        }
    </style>
</head>
<body>
    <h1 class="heading">Welcome to hashnode</h1>
    <p id="greatting">Hi I am Alok Raj</p>
</body>
</html>

Here you can see we have selected the body tag and changed the background color and selected the h1 tag using the class heading and change the color you can select any of the elements using a tag name, class, and id.

Types of Selectors.

Type, class, and ID selector.

In this group, we select HTML elements by tag name, class name, and id name followed by curly braces then define CSS properties.

//selecting any element by HTML tag like this
p{
  color:#fff;
}
//selecting class using **.**
.header{
color: red;
}
//selecting id using **#**
#greatting{
color: red;
}

To select a class use “.” And for id use “#” followed by curly braces then define CSS properties.

Attribute selectors

In this group, we select elements by their attributes.

<p title="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, repellendus?</p>

So we can select a p tag like this

p[title]{
//CSS properties
}

Pseudo-classes and pseudo-elements.

In this group, we target elements by their state like-

button: hover{
//CSS properties
}

Here you can use any of the CSS states using ":"

Combinators

In this group, we target elements by multiple selectors (tags, classes, and ids)

There is a different type of CSS combinators selector

Descendant selector (space)

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li> //1
        <li>highlight me</li> //2
      </ul>
    </div>

In this code snippet, we will target the li tag under the ul tag (mean in lines 1 and two)

div ul li {
        background-color: #4b35f1;
      }

Child selector (>)

In this group, we select the child element

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
    </div>

Here are multiple children In the code snippet

so, we will target the li tag only (only one li tag, not all li means li under ul will be not targeted because li under ul is a grandchild)

div > li{
        background-color: #7667e4;
      }

Adjacent sibling selector (+)

In this group, we select elements just after, adjacent sibling

.sibling + p {
        background-color: pink;
      }
// We have targeted *test 2* by selecting class sibling and *p* tag just after this class.
     <section>
      <p class="sibling">Test 1</p>
      <p >Test 2</p> 
      <p>Test 3</p>
    </section>

General sibling selector (~)

A general sibling selector selects all elements that are the closest siblings of a given element.

div ~ p {
  background-color: yellow;
}

<div>Welcome to live class</div>
    <span>Span is just a span, nothing more</span>
    <p>We all know paragraph</p> //*This line will be targeted*
  </div>

Alok's Blog