CSS    Selectors

CSS Selectors

ยท

4 min read

In this Article we will read about some CSS Selectors and understand them with the help of some examples.

Selectors in CSS:-

CSS selectors are used for selecting the HTML elements for which we want to provide some styles. Selectors target some particular elements or the whole code as required by the user. The element or elements in HTML which are selected are known as the subject of the selector.

Types of Selectors:-

There are different types of CSS selectors some of the important selectors are as follows:-

  • Universal selector

  • Individual selector

  • Class and Id selector

  • Group selector

  • Inside an element

  • Direct child

  • Sibling selector

  • Pseudo-classes

  • Now let's discuss these selectors in more depth-

Universal Selector:-

A universal selector is a special CSS selector. It selects all the Html elements present in our file and applies CSS properties to them as given by the user. It is denoted by "*".

ex- By applying the code given below to your Html file you can see that the background color of your webpage is changed.

<style>
*{
    background:##242B2E;
}
</style>

Individual selector:-

The individual selector will select all the specific Html tags or elements present on the webpage . For example, if you select p tag it will select all the paragraphs present in the file.

<style>
p{
 color:#1B98F5;
 background:#0D0D0D;
}
</style>
 html
<p>lorem10</p>

In this example, you will see that the color of the text is blue and the background color of the paragraph is black.

Class selector:-

As the name specifies this selector will select the element or elements which have the required class. We have to put (.) before the class name to select the class. We can also select another element with a different class at once.

ex- You will see the text color of the paragraph with the class home will change and the color of paragraph two remains the same.

<style>
    .home{
     color:#FF6666;
}
    .home.room{
     color:#FF6666;
}
  </style>
html
  <p class="home"> This is paragraph one </p>
  <p> This is paragraph two </p>
  <p class="room">This is paragraph two</p>

Id selector:-

This selector will select the element which has the id. This selector should be used once per page since it has higher precedence than any other selector. id selector begins with (#) followed by id name.

ex- you will see that the color of the element with the id named " teacher " is changed.

<style>
#teacher{
   color:#758283;
}
</style>
 <ul>
    <li>This is line one</li>
    <li id="teacher"> This is line two</li>
    <li>This is line three</li>
</ul>

Group selector:-

This selector is used when we have to apply the same CSS style to the different elements. This selector is very useful as it saves time and we don't have to write the same CSS multiple times.

<style>
    p,article{
     background:#242B2E;
}
</style>
<body>
      <p> lorem5</p>
       <article>This is the article tag</article>
</body>

Inside an element:-

This selector is used to select an element inside any other element.

 div ul li{
            background: rgba(7, 207, 214, 0.972);
            color:#E6425E;
        }

It will select the li element inside the unordered list which is under the div element.

Direct child:-

It selects the direct child elements of the parent elements and elements inside them are not selected. (>) is used to select elements inside the parent element.

div > li {
          background: rgb(15, 130, 224);
        }
html
 <div>
          <p>lorem</p>
          <li>This line will be selected</li>
</div>

Sibling selector:-

This selector is used when we have to select the element which is just after the sibling class element. (sibling ~ or +) is used to select the element. It will not select the element before the sibling class element.

<style>
 sibling + p{
   background:#e94964; 
}
<section>
          <p >Text 1</p>
          <p >Text 2</p>
          <p>Text 3</p>
          <p class="sibling" >Text 4</p>
          <p>Text 5</p>
        </section>

It will select "text 5" and change the background color of it.

Pseudo-classes:-

The pseudo-elements are used to style the specified part of the element. we can also use pseudo elements to insert any content before or after the element and to style the first letter or line of the element.

Before:-

The before element can be used to insert some content before the element.

.check:hover::before{
   content:'';
   display:block;
   width:20px;
   height:20px;
   border-radius:10px;
   background-color:#FF6263;
}
  <div>
      <form action="">

        <label class="check" for="name">name</label>
        <input type="text" name="name" />
          <button data-tooltip="Tooltip" type="submit">Submit</button>
      </form>

In this example, you will see if you will hover over the "name" a pink color circle will appear just above the name.

Thank you for reading ๐Ÿ˜ƒ.

ย