Search This Blog

Monday, April 23, 2018

CSS Descendant Selector and How To Use It

When it comes to CSS, selector are used to specify which HTML element you intend to style with a particular CSS declaration. But most times, it gets difficult using selector because when not used properly, will apply the style to all the elements in the HTML document and not just the one you have in mind. This is where CSS descendant selector becomes handy.



What though is the CSS descendant selector?
Put simply, the CSS descendant selector is used to select an html element that is inside another html element. I will explain further with the code below.

<ol>
<li> <a href="https://pinfoltd.com"> Pinfoltd </a> </li>
</ol>
In the code above, you will notice that both the li tag and the a tag are inside the ol tag. In this regard, both the li and the a tag are descendants of the ol tag. Also the a tag is a descendant of the li tag because the a tag is found inside it.

So if for example you want the content of the a tag which is inside the li tag to have a different style from other a tags in your html document, you can use the CSS descendant selector to select it before declaring the style properties and values. This bring us to the next section.

How To Use The CSS Descendant Selector
To use the CSS descendant selector, you will need to separate the parent selector and the descendant selector with a space.

Using our ol example above, if you want to use the CSS Descendant selector to style the a tag, then the CSS declaration will either be:
ol li a {
color: green;
}
OR
li a {
color: green;
}
The first declaration will produce this result.
Ordered List
  1. Pinfoltd  
Unordered List
The second `aration will produce this result.
Ordered List
  1. Pinfoltd  
Unordered List


Also Read:
Team +Pinfoltd


SHARE THIS

0 comments:

Search This Blog