CSS Selectors Explained with Demo: A Learning Journey to Web Development
Whether you are a beginner or an expert on CSS, I can say with a good degree of confidence that you don’t know every single CSS selectors. That is completely fine. But it also leaves us feeling guilty about ourselves. It makes us feel like we’re stealing when we look up basic stuff which everyone else seem to know about. But trust me, most of them don’t!
N.B. This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
We’ve discussed basics of CSS in the last post. Today we are going to meet the team of CSS selectors. I’m not going to list out every single CSS selectors there is though. Partly because I don’t know them myself, and partly because you’re not gonna need them anytime soon. So, Let’s begin!
Demonstration with Code
Understanding of CSS greatly depends on the understanding of CSS Selectors. So, to help you understand more clearly, I am going to demonstrate all the CSS selectors on an HTML code snippet I made. Let’s first look at the HTML code and then we will be applying CSS on it.
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<h1>Puuchee and Molly</h1> <div id="cat">
<p>Hi, I am Puuchee. I think I make sounds that sounds like Meaw Meaw. But some people argue that I sounds like Eeao Eeao.</p>
<p>Anyway, I have three kittens. They are: </p> <ul>
<li class="kittens">Milli</li>
<li class="kittens">Tigger</li>
<li class="kittens" title="I'm brown!">Chole</li>
</ul>
</div> <div id="dog">
<p>Hey Man! I'm Molly. I think I make sounds that sounds like Ghaw Ghaw. But some people argue it sounds like Vhaw Vhaw.</p>
<p>Anyway, I have three puppies. They are: </p> <ul>
<li class="puppies">Buddy</li>
<li class="puppies">Ruddy</li>
<li class="puppies">Huddy</li>
</ul>
</div> <p>Pucchee and Molly are friends. Though all the Kittens and Puppies keeps fighting all day, but that just the way the have fun. They are friends too.</p>
<p>The world is all Sunshine and Rainbow here!</p>
</body>
</html>
It looks like this without any CSS applied:
I will apply a simple background color on various elements of this HTML file using different CSS selectors. The elements that get selected will adopt the background color and hence, will be highlighted.
CSS Universal Selector
The first one is Universal Selector. It’s written with asterisk ‘*’ symbol. The universal selector selects every element from top to bottom of an HTML page. We can apply the same styling to all the elements at once using this selector.
Let see it in action!
* {background-color: darkviolet;color: white;}
Output:
Universal selector applied the background color Dark Violet on every single element. So, the whole page turned into that color.
The Element or, Tag Or, Type Selector
Element selector selects an element from HTML page by the name of the element itself. Simple as that. The first element we have in our body is an h1. Let’s apply the styling on it!
h1 {background-color: darkviolet;color: white;}
Output:
The id Selector
An id selector simply selects an element by the name of its id. The only rule is to put a hash ‘#’ before the id name in CSS. We have 2 div element in our body. They have id’s of ‘cat’ and ‘dog’. Let’s apply the styling on cat.
#cat {background-color: darkviolet;color: white;}
Output:
The class Selector
This is the most used and probably the most useful CSS selector. It can grab an element from HTML using the class name of that element. Like id Selector, Class selector also needs to be coupled with a symbol. But this time, a dot ‘.’ instead of a hash.
In our ‘cat’ div, we have a list of kittens and each of them has a class name of ‘kittens’. It’s time to get the kitten styled.
.kittens {background-color: darkviolet;color: white;}
Output:
The ability to have multiple class on a single HTML element, and applying style on numerous elements using only one class, makes the class Selector extremely powerful and useful at the same time.
Descendant Selector
We can combine multiple CSS selectors to create even more specific selector. That is the main idea of a descendant selector. Let’s say we want to apply some styling to the list of puppies. If we use the element selector of ul, it would apply the style to both lists of puppies and kittens.
Yeah, we can add class or id on the list element and then style it, But why bother adding extra class and id when we can have it without them?
#dog ul {background-color: darkviolet;color: white;}
I have combined the id selector with the element selector separated by space. In descendant selectors, the selector sitting at the right is called the key selector. Because that is the element on which the styles will be applied on.
Here, ul is our key selector. And the id selector on the left means that the ul will have to be within the ‘dog’ id. So, this whole selector means: style only the ul element which is situated inside of ‘dog’ element.
And the output is:
Child Selector (>)
Pretty self-explanatory. It selects all the child elements of a specified element. This might sound just like descendant selector, but they have differences. Though descendant selector matches child’s of the specified elements, it also matches child’s of the child’s of the child’s. Essentially it matches all the elements even if they are buried deep down several layers of code.
On contrast, Child selector only selects the immediate child of an element. We have two paragraph element as a direct child of body. We also have several other paragraphs, but they are not immediate child of body. So, using the child selector will produce this:
body > p {background-color: darkviolet;color: white;}
Output:
The keyword to use the child selector is ‘>’ angle bracket. Where parent sits on left-hand side and child sits on right-hand side.
General Sibling Selector (~)
General sibling selector selects all the sibling elements within the same level. We have two paragraph our body which are siblings of div elements. We can select them using general sibling selector like this:
div ~ p {background-color: darkviolet;color: white;}
Output:
Even though the selector was different, they are producing the same result. General sibling selector uses the symbol ‘~’ to denotes the sibling elements.
Adjacent Sibling Selector (+)
Unlike general sibling selector, Adjacent sibling selector only matches sibling immediately followed by the specified element. In our code, we have two div elements. The second div have two sibling paragraph element immediately after it. Applying the adjacent selector will select only the first one of those two.
Adjacent selector uses plus ‘+’ symbol for its syntax.
div + p {background-color: darkviolet;color: white;}
Output:
Attribute Selector
Attribute selector can be extremely helpful in some situation. Using this, we can match any element by matching their attribute name or attribute value or both! For example, one of the kitten has a title attribute. If we want to match that element, we’d simply write:
[title="I’m brown!"] {background-color: darkviolet;color: white;}
This would match any element which has the title attribute and the value of ‘I’m brown!’.
We could also write li[title=”I’m brown”] which would match only li element with that attribute and value. Again, we could also write li[title] which would match any li element with title attribute no matter what the value is!
Attribute selector have a group of sub-selectors that can be used to fine filter the specific element you want to target. Those selectors deserve their own post and I’ll try to write one for them soon.
Positional Selector or, nth-child selector
We can select a specific element of siblings by its position number using the positional selector. We have three items in each list of kittens and puppies. If we want to select the third item on both list, we can write:
ul li:nth-child(3) {background-color: darkviolet;color: white;}
Output:
‘:nth-child()’ is actually a function that selects elements based on the number you pass in the function. Like attribute selector, there is so much we can do with positional selectors and it definitely deserves it’s own post too. So, we’ll look into that soon.
Pseudo Selector
The pseudo selector is a type of selector that doesn’t actually select any elements at all! Rather, it selects a particular state of the element. For example, I can select an element’s hover state and then specify styles for that element which will show up only when the element is hovered.
Same way, other states like active, visited can also be styled using the pseudo selectors. I’ve applied it on both of the div we have in our HTML.
#cat:hover, #dog:hover {background-color: darkviolet;color: white;}
It looks like this when I hover over them:
Try it Yourself
I’m attaching the source code of this demonstration in the code pen below. I’ve commented out all the CSS from the code. Remove the comments and see the effects of different selectors.
These are not full list of CSS selectors but these are ones that you’ll be using almost 95% of your development time. If you can utilize these CSS selectors we’ve discussed, you’ll be able to target any element regardless of how complex the HTML structure is.
Conclusion
There is some advanced selector that I think worth knowing and we’ll discuss those as we move forward. Feel free to ask me any questions and please share this post on your social networks.
Keep experimenting and mistaking until I see you again in the next post.
