Definition of CSS Descendant Selector
CSS Descendant Selector is defined to select all the elements which are supposed to be the child elements and one of the CSS Combinators. This is implemented to select every single child element which is mentioned under the tags of CSS selector part also it makes use of existing structure of XHTML format to style a document that gives finer control on the web page. In simple terms, this selector is simply a list of other selectors too but followed by HTML hierarchy. Descendant Selector includes elements that are not direct elements too like a child, grandchild and etc.
Syntax:
Here we have simple syntax where we can write a parent and then followed by the targeted element. The general Syntax is given as:
Element element
{
// CSS Statements;
}The above syntax has two arguments the first Element says the initial element to match, the second element must be a descendant of first element. And the body statements follow the CSS Styles. And adding a small space between the two selectors the same style element is reflected in child element too.
How Descendant Selector work in CSS?
We had already seen the keyword selectors; they are used in targeting specific element which has Unique IDs and class. The term Descendants targets HTML elements which are offspring such that the targeted elements are based on the relationship of HTML document. CSS provides some special combinators like sibling selector, child selector, and Descendant Selector. And this allows to save big coding.
Here we learn on simple concept of Descendant selector and its working steps. Let’s take a simple HTML document to explain the descendant Selector.
<html>
<head> <title> hello </title> </head>
<body> <h1> hello everybody </h1>
<p>this is a text </p>
<img src=”gio.gif” > </img>
<a> …</a>
<b>…. </b>
</html>So, from the above code the <body> tag is the parent of both <h1> and <p> element. In simple terms I could say that <p> , <a> ,<img> ,<b> elements are the descendant of the body element.
Sample example: It may take two or more selectors and each separated by whitespaces.
p em {color: red; }The above statements trigger the browser to select all em elements which are under the p elements according to the rule. The em element which are not descendant of p element will not be selected.
If suppose we are in need to use a strong HTML element in Heading element what we do?
h2 strong
This statement completely selects a strong element under the heading of level 2 and makes it underlined.
Even nesting is possible here:
div p em {color: blue;}Descendant selector could be combined with grouping to give out good patterns.
Examples
Let us see different implementation on selectors.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example on descendant selectors</title>
<style>
.DataMining {
background-color: Red;
}
.Python {
background-color: pink;
}
.BigData {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1> <center><b>COURSE CATEGORIES</center></b></h1>
<p>You can learn of your Wish with proper Schedule and Life time Access where you can learn from experts:</p>
<ul>
<li>
<strong class="DataMining">DataMining </strong>
</li>
<li>
<strong class="BigData">BigData</strong>
</li>
<li>
<strong class="Python">Python</strong>
</li>
</ul>
<p>Well ! Top Categories includes <strong class="green">schedule</strong> Improving Business Development , Marketing, design and in IT sector</p>
</body>
</html>The above code snippets shows how descendant selector adds paragraph tag <p> which are under the <h1> tags.
Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: green;
font-size : 20px;
}
</style>
</head>
<body>
<div>
<p> Welcome to Home Shopping</p>
<p> You can Shop by department</p>
<section>
<p>You can contact here with www.homeshooping.com with terms and conditions</p>
</section>
</div>
<p>Its time to bring good feel</p>
</body>
</html>From the above snippet we understood that <p> tag is affected inside <div> tag element. Such that the last <p> element is not highlighted as it is out of <div> tag.
Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p b {
background-color: pink;
color : red;
font-size : 20px;
}
</style>
</head>
<body>
<p> Hello , <b> CSS world! </b> - Introduction to CSS Selectors <b> CSS Working </b> </p>
linking , <b> CSS </b> - To HTML <b> with Bold elements </b> hi !.
</body>
</html>The Above code says about the bold element. By the way in this example I made all the bold elements to be red which are inside a paragraph tag. The bold element which are out of the paragraph tag are made bold but the color style is not reflected as they are not the Descendant selector. The same example is useful for making the main menu links to change the color.
Output:
Example #4
Descendant with no direct Child example- Here child of child element is reflected.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Selector b {
color: red;
background-color: Powderblue;
font-family : courier;
}
</style>
</head>
<body>
<div class="Selector">
<b>List 1</b>
<div>
<b>List 2</b>
<div>
<b>List 3</b>
</div>
</div>
</div>
</body>
</html>The above code states that the targeted element here is <div> element with the class followed by bold tag. But here it has many layers of div with bold element the color style is still reflected on all the bold element. If suppose we want the direct child to reflect a child selector is used. Here is the demonstration output:
Output:
Example #5: Selector with Different Elements.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div p
{
color :purple;
font-size :20px;
}
ul p {
background-color : yellow;
}
</style>
</head>
<body>
<div> <p> Perfect Mail </p>
<p> List the address </p>
</div>
<ul> <p> Yahoo id </p>
<p> hotmail id </p>
<p> Gmail id </p>
</ul>
</body>
</html>Here two different selectors operating parallel with common <p> element.
Output:
Conclusion
To conclude, we had seen how to use CSS descendant selectors with their syntax and implementations. This gives us a way to give a super presentation by making separation which makes code clear and clean with good structure. Though we have seen the initial selector in the previous articles which gives control over the web page. Therefore, this Descendant selector provides fine control on the HTML elements. Anyways it is good to see CSS selectors is extremely powerful to do so.
Recommended Articles
This is a guide to CSS Descendant Selector. Here we discuss a Definition of CSS Descendant Selector and How Descendant Selector work in CSS? with different examples along with its code implementation. You can also go through our other suggested articles to learn more –
