CSS Descendent Selector | Immediate Descendant Selector

In the previous post we have discussed the CSS class selector and CSS Id selector. We discussed that how to use these CSS selector types in your documents. We have given you some naming conventions for the class and id selector.

In this post we are going to give you more information about the CSS selector types. We will provide code snippets as examples for these CSS selector types. Let us start the CSS tutorial now.

CSS Descendent Selector

This selector is used for highly specific selectors that target elements based on their location within other elements in a styled document. To use CSS descendant selector you just simply string the elements in CSS file. See the following code below:

<div>

<p>

<a href=””>Targeted Element</a>

</p>

</div>

In CSS

div p a {color:red;font-size:18px;font-weight:bold}

In the above code we are give style to a specific HTML tag or HTML element e.g. <a> tag. It is inside a <p> tag and the <p> tag is inside a <div> tag. To style the <a> tag we are using the CSS descendent selector method. We have started from the parent tag (<div>), as we have to, and then the next tag (<p>) and at the end we have give the target tag (<a>) in the CSS. So when you style elements with descendent selector you have to start from the parent element to the targeted element without the angle brackets. You should keep in mind that you have to separate these elements by whitespaces. There is no limit to include element selectors but more than 3 elements are going to be inefficient. You should keep in mind that this selector will affect all the anchor tags within a <p> tag and <p> tag within a <div> tag where ever it is.

CSS Selector Grouping

It is very useful to group the CSS selectors that share the styles. With the help of CSS selector grouping you can group the ids, classes, element selectors or CSS descendent selectors that have the same code of CSS. Let us see the following example to understand it more.

p{color:red; font-size:14px;font-weight:bold;}

.my_class {color:red; font-size:14px;font-weight:bold;}

#my_id {color:red; font-size:14px;font-weight:bold;}

div a {color:red; font-size:14px;font-weight:bold;}

We can write the following line instead of the above four lines.

p, .my_class, #my_id, div a{color:red; font-size:14px;font-weight:bold;}

This is the benefit of CSS selector grouping that we have used just one line in place of four lines of code.

CSS Immediate Descendant Selector | CSS Direct Descendant Selector

We have talked about the CSS descendant selector above. Now we are going to talk about the CSS immediate descendant selector or CSS direct descendant selector. It is quite similar to the CSS descendant selector but when you say that immediate selector it means that you are going to select the element that is immediately inside the parent element. Let us see the example to understand more.

<div>

<a href=””>first</a>

<p>

<a href=””>second</a>

</p>

</div>

In CSS

div > a{color:red; font-weight:bold;}

This will only affect the first <a> tag because it is immediately inside the <div> tag. It will not affect the second <a> tag because it is not immediately inside the <div> tag.

Comments