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.