Introduction

When you want to style an element with CSS, you first have to "select" it. In this article, I'll show you some ways in which you can do that. CSS Selectors target the html element and helps developer to apply css styling rules to that particular selected HTML element. You might have knowledge of some basic CSS selectors but a bit more than basic knowledge helps in achieving your goal faster. Using the right CSS selectors minimize the amount of code, makes it more readable, and makes the CSS simpler to maintain that in the future.

Here's the syntax for styling elements in CSS:

Selector{
   /* styling rules */;
}

Some important Selectors every developer must be aware off:

The Universal Selector

The Universal Selector, represented by asterisk (*) symbol, allows you to select ALL elements of any type for styling. Here is an example:

   *{
     margin: 0px;
     padding: 0px;
     color: white;
     background-color: black;
     text-align: center;
    }

these rules will be applied for entire HTML document.

Element Selector

You can also select elements for styling by using their tag names, like you can apply same style to all the paragraph elements by selecting <p> tag in a webpage. See the example below:

   p{
     color: red;
     background-color: yellow;
     text-align: center;
   }
   ul{
      background-color: rgb(37, 9, 9);
      color: whitesmoke;
      width:258px;
      height:758px;
       }

Class Selector

You can target or select html element by reffering to their class name using dot(.) symbol in css file. Below is an example:

.red{
    background-color: rgb(52, 69, 148);
    color: white;
    height:300px;
}
.green{
    background-color: green;
    color: aqua;
}

where, red and green are names given to class attribute to some html element.

Id Selector

You can target a element by its unique name, i.e. defined in id attribute, to style that particular element. example:

#head{
       background-color: yellow;
       color: blue;
        }

it will select the element with id="head" ,and give its background color yellow and text color blue.

Attribute Selector

We've seen how to target class and id attributes. What if you wanted to target other attributes? Well you can; using square brackets ([attribute]). How does that work?

Let's see an example:

<input type = "text" id="uname"  class="username"  name="username">

input[type="text"] {
     color: blue;
}

Pseudo-class Selector

Pseudo-classes are selector types that allow you to select elements in a particular state. Here are some supported states:

• :hover :selects an element that is being hovered by a mouse pointer.
• :focus :selects an element receiving focus from the keyboard or programmatically.
• :required :when a form element is required.
• :visited :selects a link that has already been clicked.

You can apply styles when elements are in these states. You select the state by using a colon (:) followed by the state. Here is an example:

<button >Click me</button>

:hover{
    background-color: black;
    color: white;
}

This css rule will help you to hover on Click me button.

Descendant selector

Descendant selector apply styling to only those elements that are descendants of a specified element. This selector is very useful when you need to apply styling only for some specific elements. See below example:

 nav ul li a {
    background-color: green;
}

this selects 3rd descendent of <nav> i.e. <a>

Conclusion

Wrapping up, we have seen in brief what is a selector, types of selector with examples to make you understand better.

Thank you for taking your time to read:) Stay tuned for upcoming articles on css.