CSS Selector

CSS Selector

ยท

4 min read

If you can choose an element from html, you can master CSS.
To do this we must know CSS selectors.
This Article is all about this, hope you will love it.

All the code is available in the article with Interactive environment, feel free to make changes and see the results
Happy Coding ๐Ÿ˜Š

Universal Selector

This is the type of selector that can match any element.

It can be represented using the (*) symbol

syntax : * { style properties }

Here in the example we have selected all the elements of the HTML document using (*) and have applied basic styles such as background-color: #38cc77 and margin: 0 for all elements.

We can also use a universal selector with class names and IDs, try to implement by yourself with this and see the changes.

/* here is an example of this. */
*.example-class {
  color: yellow;
}

*#example-id{
  border: 1px solid black;
}

Here (.) is used to indicate the class name and (#) is used to indicate the ID.

Individual Selector

The individual selector is used when you want to select the elements of a particular type in the HTML document.

Let's say we want to give style to all the <p> tags present in the HTML.

Here is an example where we are selecting all <p> and <li> tags present in the HTML to give the style you want.

But the above approach has less specificity.

Class and ID Selector

The class selector begins with the character dot (.) and the ID selector begins with the character hash (#). Everything in the document that has that class assigned to it will be selected. The class and ID were created in the live example below. All the elements will get the style effect that has the ID or the Class specified.

Chained Selector

Using this selector we can fetch elements by using multiple classes or IDs and which increases the specificity of the element.

li.bg-black.text-white{
    color: pink;
}

Combined Selector

This Selector can be used in order to select multiple elements at the same time and to apply the same style to those selected elements.

span, li {
    display: block;
}

Inside an element

If we want to select the element present in the parent element and so on.
let's say we have <li> inside <ul> tag and <ul> tag present inside <div> then how can we select that <li> tag present under <ul> specifically?

div ul li{
    display: block;
}

Direct child

We use this selector method when we want to select the child element present directly inside the parent element.

div>li{
    color: red;
}

In the above snippet, we can see it selects all the child <li> tags which are a direct child of the <div> element.

Sibling Selector ~ or +

This selector is used when we need to select the sibling element of some element. This is the least used selector in the CSS.

Say we have <div> then <li> then <p> and then <a> at the same level and I want to select the sibling of the <p class="sibling"> tag then my result should be <a>, let's see it practically below.

.sibling + p{
    background-color: black;
}

Pseudo Selector

The - ::before Pseudo-element

This is used to give some content before the element in the HTML.

Let's understand with the below example of Codepen which I have written. You can find an explanation below for the code added.

In the above example, We can see that I have <h1> tag which has the text Hover me to see a circle before me <h1> So once you have this text present in the <h1> tag you will be able to see the circle made before the text. Why did it happen?

If you open the CSS tab you will understand we have written some lines of code to do this work.

We first select an element which is h1 tag then we applied a pseudo-class hover on it and then we applied another pseudo-class before and have written a design to make a circle.

Note: We always need to add a property content in this case, as that is the content that will be added before the given element.

The - ::after Pseudo-element

This is also a pseudo-element that helps us to add content after some element, yes we can do it with HTML but suppose we want the element to be present when we do some activity on the element. In this situation we use pseudo-selectors.

Here is an example of an after pseudo-element.

In the above code, if you click on the result window, you can hover on the line which says hover me to see a circle after me and magic!!! you can see the circle after that.

In this article, we have learned about different CSS selectors and we have also seen different examples of each. Hope you get some input from this article.

Please support me by sharing and loving this article which makes me confident writing more such articles on different topics in the journey of being a Full Stack Developer.

ย