Beyond the Basics: CSS Selectors Unleashed

Do you know that selectors are the most important part of CSS?

When we talk about CSS, most people will say or think that we know that yes, of course you know, but there is a catch: knowing the styling of HTML content is not only CSS. Let me explain. You might know how to style a webpage, and that's great, but when it comes to professionalism or advanced things, CSS selectors come into play. If you know how to select that particular element, then you can definitely do something out of the box.

Types of selectors:

There are many types of selectors, but we will cover the most popular and widely used in industry. So let's get started!

1. Universal selector

As its name suggests, "universal" means it will select all the elements on a webpage and apply CSS to all of them. It is also widely used in industries.
Syntax:

*{
styling 
}

example:
This will remove the default padding and margin from the whole webpage.

*{
padding:0px;
margin:0px;
}

2. Element Selector

We are all familiar with HTML tags, right? When we need to select an element, or we can say an HTML tag, we use the element selector. It can be any element of HTML, but if we select an element, it will apply to all elements present on the page. Suppose we select a <p> tag and apply some CSS to it, then it will be applied to all the <p> tags in the code.
Syntax:

element{
   styling
}

Example:

h1 {
  color: #1a047d;
  background-color: #949494;

}

One more thing: always write the colour in hex code format so that the website will look the same in every browser.

3. Class selector

We'll be using the class selector most of the time to select the class and play with it. To select a class in CSS, we have to use . before a class name, and it is good practice to reuse the classes in HTML to avoid repeating code.

Syntax:

.class_name{
Your CSS
}

Example:
btn is the name of the class

.btn{
  color: #eae8f1;
  background-color: #f38b8b;
}

4. ID selector

There are some times we are only required to style a unique element in these types if case ID comes into the picture. It allows us to style and select the element using ID, and we have to use # before mentioning ID.

Syntax:

#ID_name{
styling
}

Example:
school is the name of the ID

#school{
  margin: 0;
  padding: 0;
}

5. AND selector or chained selector

This selector is interesting. Supposing somebody said, "I want a cup of coffee and bread," what would you give him? Both right? same in this case of the AND selector, it will select the element only if it satisfies all the conditions. Let's understand with an example.
This is a code snippet we'll be working on.

 <ul>
            <li class="text-orange">Home</li>
            <li class="text-blue sans-serif" id="bg-white">Services</li>
            <li class="text-orange" id="bg-black">About Us</li>
            <li>Contact Us</li>
 </ul>

In this case, suppose we have to target the 'li', which has the class text-orange and ID 'bg-black'. This condition will only satisfy if a li has a class named text-orange and an ID named bg-black.

Syntax:

.class1.class2{
styling
}

Example:

li.text-orange#bg-black {
  background-color: #cbf8cb;
  color: #0000ff;
}

Output:

6. Combined selector

When we have to target more than one element, we use the grouping selector. We can use it to select multiple elements, like two or more classes, IDs, elements, or a mixture of those. Let us understand it by example.
Syntax:

class_name, ID_name, element{
styling
}

Example:

.text-orange,
#bg-black,
h2 {
  color: #720000;
  background-color: antiquewhite;
}

Output:

7.Inside an element selector

Sometimes there might be a scenario where you have to target a specific element that is inside another element. In this case, we use the inside element selector. It's very simple; we just have to put space between those elements.

Syntax:

element1 element2 element3{

}

Example:

nav ul li {
  color: blueviolet;
  background-color: #4f3636;
}

In this case it will search for a nav and then ul and finally li
Output:

8. Direct child selector

This is useful to select the direct child element. Let me explain: suppose we have to select a particular element that is inside some elements. In this case, we use the direct child selector. Let us understand it with the help of an example.

Syntax:

element1 >element2 >element3{

}

Example:

div > span {
  color: #ffff00;
  background-color: #fe8223;
}

Output:

9.Siblings 

There are two types of siblings: direct siblings and adjacent siblings. We can target direct siblings with + and adjacent siblings with ~.

Syntax:

element1 + element2{
styling
}

Example:

h3 + p {
  color: #fe8223;
  background-color: #4f3636;
}

Output:

Adjacent sibling Syntax:

element1 ~ element2{
styling
}

Example:

h3 ~ li {
  color: #27fe23;
  background-color: #201f1f;
}

Pseudo-elements

Some people find the pseudo element a little tricky, but no worries, I'm here to help you out. There are many pseudo-elements, but as of now, we'll cover only ::before and ::after pseudo elements.Let me explain that a pseudo-element is a keyword that is added to a selector and lets you style a specific part of the selected element.

::Before keyword

Syntax:

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

Example:
When we use ::before It will add the style before the selected element. In this case, we have added "🔗"before the <a> tag.

a::before {
  content: "🔗";
  display: inline-block;
}

Output:

::After keyword

If we use ::after It will add the style after the selected element. In this case, we have added "🔗"after the <a> tag.

a::after{
  content: "🔗";
  display: inline-block;
}

Output:

Easy peasy, right? That's for today. I'll catch you in the next article with some interesting topics.