This post is in continuation of my previous post on CSS Selectors where I discussed about three primary selectors : Element, Class and Id. Later we discussed that how can we group multiple selectors to same CSS style. We also discussed how browser applies these CSS rules. There are many more powerful css selectors that we can write for targeted elements. Refer the below link to look on my previous post.

CSS selectors for beginners

Before moving ahead, lets just quickly discuss that how browser processes the HTML that it recieves from network layer. Browser has its own rendering engine which parse the HTML and constructs a DOM (Document Object Model) tree where each HTML tag added as a node in the Tree. It looks like

(source: http://www.w3schools.com)

Now let’s move to the next selectors and where we will see these selectors follows the DOM structure.

Descendant Selectors : These type of selectors contains more than one selector. It matches all the elements that are descendants of the provided element. You can also understand this is parent child relationship where it can go up to any hierarchy and the last child of the element is searched in all the elements under its parent element (ancestor). Lets see how do we write that

The above rule matches all the <a> (anchor) elements under nav tag regardless at what level it is. In the example, I have five child elements in my nav tag, in which four are <a> element and fifth is div element which contains another <a> element. This selector finds all the anchor tags under nav tag. There are some more anchor tags outside nav tag which are not selected. Lets see the example.

https://plnkr.co/edit/ZMnJH4KD71BmfmRxor9f?p=preview

if we change the selector as

Then it applies the element which follows the above hierarchy and all the anchor elements inside the div which is inside nav. In the previous example, now it will applies to only one anchor (About me).

Child Selector

This selector similar to previous one but bit more constrained. It only finds the direct descendants of the provided element, i e looks only siblings elements. It is defined as

Here it only finds the <a> elements which is directly under the nav tag. I am using previous example and changing only the selector. Now this applies to only four out of five anchor tags because these four are sibling and another one is inside another div tag. Lets see the example.

https://plnkr.co/edit/4V5gFILER8E5RZP6ZNYd?p=preview

Similar to earlier, we can add more hierarchy to narrow down for focused search.

Adjacent Siblings Selector

It is another selector but less used. As the name suggests, it applies to siblings or element at same level. It is combined by a symbol plus (+). One more thing, the siblings should be adjacent sibling as the name suggests and in the same order.

The above selector matches all the div elements which are just after the h1 elements in the same order. In my example, I have a div element and after h1 tag. Lets see the example

https://plnkr.co/edit/i9DRyvobL9mGENtFvUnl?p=preview

We can see that in all the three selectors how DOM tree structure helps in finding the elements easily.

Let’s move another set of selectors. As we know that in the era of rich web pages, single page applications etc most of the times pages gets very heavy and contains lots of html elements. So it is our duty to write the right selector which is narrow down the search scope.

Narrowing the selectors

Dot (.) can be used for narrowing down the selectors. Let’s see an example

Here it is going to find all the div elements which has class as blueText. Here both the rule applies to same element. In the example, I have a div with blueText class where this rule applies while there is other div which is unaffected

https://plnkr.co/edit/XwTYuHznwoFsLDvriVEk?p=preview

Attribute Selectors

It is another type of selector which finds the elements that has a specific attribute and apply the provided style on that. Lets see how to use that?

Here it finds all the <a> which has a href set as  ../Index.html. In the example, I have two <a> elements with the same href value. Lets see this

https://plnkr.co/edit/P27HO2sfVHWeX4hwJn2N?p=preview

We can add more power to attribute selectors by using operators. Few are

First rule finds the elements which contains Index in href. Second one selects the elements which href starts with Index and third one finds the element which href ends with the given value. This rule can be used with any attribute of an element like alt, class etc. You can explore more operators.

In this post, I have discussed lots of different selectors which can be used. Even on top it, we can have n number of combinations of these all based on our requirement. Hope you will be writing better CSS rules using these selectors.

Cheers
Brij