Selectors are not as simple as they look like. They can be really tricky some times, and specially for beginners, understanding selector is the crux of the matter. I'm here to explain all kinds of CSS selectors briefly.
1. Universal selector:
* is the universal selector in css. It is used to select every element of the HTML DOM.
Example:
*{
/*Declarations*/
margin: 0;
padding: 0;
border: 2px solid black;
}
2. Individual selectors:
Individual selectors select a particular HTML tag from the entire HTML document. Like the previous one, the syntax is pretty simple. All you have to do is mention the tag you want to select followed by curved braces.
Example:
p{
/*Declarations*/
color: #FFFFFF;
background-color: #4D4D4D;
}
This will select all the p tags available in the HTML DOM.
3. Class and id selectors:
Individual selectors will select all the elements available in that particular tag, but what if we need to select only a small part of that tag? Here comes the role of the class and ID selector. It will only select the particular class or id, not all elements with that tag. To use these selectors, first we have to mention the class or ID name in the targeted part of HTML. For example:
<p>This paragraph is not selected.</p>
<p class="selector1"> This paragraph is selected using class selector</p>
<p id="selector2"> This paragraph is selected using id selector</p>
Now, in css, we can select the class by . followed by the class name and curly braces and to select the id, we have to use # followed by id name and curly braces.
Example:
.selector1{
font-size: 30px;
color: #1bb7d6;
}
#selector2{
font-size: 40px;
color: #1fefc9;
}
As we discussed so far, it looks like ID and class are the same thing, but it is not totally correct. Though the use of ID and class is pretty much similar but there is a small difference between them. The only difference between them is that “id” is unique in a page and can be used only once in the page, while “class” selector can be used in multiple elements.
4.Chained selector:
Let's assume you want to select all the list elements with the class class1 which belong to unordered list.
Here comes the role of chained selector. You have to mention all the elements chronologically as they are in the HTML DOM for chained selector. To select the above mentioned element, you have to follow this example.
Example:
ul li.class1 {
color: #c76a13;
}
5.Combined selector:
Combined selectors are used to select multiple elements together. Lets discuss this with an example-
Lets assume you have to change the font of all the elements within li div and span. If you want to select them individually, you can do that but it is a long and inefficient process. So instead of that you can use combined selector. In case of combined selector you have to mention all the elements you want to select using , between them and then the properties between curly braces.
Example:
li, div, span{
font: font-name;
}
6. Direct child:
Using direct child selector you can select all the directly nested elements to one element.
Example:
div > li {
background-color: #c76a13;
}
Using the above example you can select all the list elements which are directly nested (ie. direct child) to a div element.
7. Siblings:
Here sibling means all the elements nested with same parent element of the targeted element. For example, Element 2, Element 3 and Element 4 are siblings of Element 1 in the following example. Lets discuss this selection method with an example.
Example:
<html lang="en">
<head>
<style>
/* case- 1 */
.sibling ~ li {
background-color: #fa04ee62;
}
/* Case-2 */
.sibling + li {
background-color: #fa04ee62;
}
</style>
</head>
<body>
<ul>
<li class="sibling">Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
</body>
</html>
In the above example, we have mentioned 2 cases in css. In the case 1, .sibling ~ li will select all the siblings of li starting from just after the sibling class. That means Element 2, 3 and 4 will be selected here. But in another case .sibling + li will select only the one list element after the sibling class which is Element 2.
These are all the main selectors we use frequently in styling a web page. Out of these there are some pseudo selectors which are also used in css sometimes. Lets discuss about them briefly.
Pseudo Selectors:
Before and after:
<label class="label1" for="text1">text1</label>
<label class="label2" for="text2">text2</label>
Using ::before and ::after we can add content using css in before or after the targeted element.
.label1::before{
content: "before text - ";
}
.label2::after{
content: " - after text";
}
Hover:
Using:hoverpseudo-selector we can create special effects while we hover the mouse on a particular element.
h1:hover {
text-shadow: 1px 1px 2px #008080;
}
Focus:
The:focuspseudo-selector gets triggered when the user clicks on the particular element. We can customise the focus effect in the following way:
input:focus{
box-shadow: 3px 3px red, -1em 0 .4em olive;
}
First child/Last child:
Using:first-childand:last-childwe can select the first and last child (or nested element) of a targeted element.
li:first-child {
background-color: #44bfe4;
}
li:last-child {
background-color: #d3f735;
}
Using custom attributes:
In the latest version, we can create a custom attribute in HTML and then we can use it on css also. as example-
<p custom-att> This paragraph has a custom attribute</p>
Now, to target this custom attribute, we have to follow the following syntax:
[custom-att] {
background-color: yellow;
}
These are most of the css selector developers use generally, though there are some more selectors which are used rarely. For more information about selectors, you can refer to MDN or W3schools. Here is a cheat sheet for you, with a list of all selectors and there examples.