A web page can have a complex organization, some elements within themselves can define other elements. Nested elements can also be called children. And the container of these elements is the parent.
For example, let’s say the body element on a web page has the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant selectors</title>
</head>
<body>
<body>
<h2>Descendant selectors</h2>
<div>
<p>this is a paragraph</p>
</div>
</body>
</body>
</html>
Within the body element, three nested elements are defined: h2, div, p. All of these elements are children of the body element.
And inside the div element, there is only one nested element, p, so the div element has only one child.
Using special selectors, we can style nested or descendant elements within well-defined elements. For example, we might have paragraphs on a page inside a main content block and inside a footer block. But for the paragraphs inside the main content block, we’ll want to set one font, and for the footer paragraphs another.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant selectors: CSS</title>
</head>
<body>
<h2>Descendant selectors: CSS</h2>
<div id="main">
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</div>
<div id="footer">
<p>footer text</p>
</div>
</body>
</html>
To style a nested element, the selector must contain the parent element first and then the nested element:
#main p{
font-size: 18px;
}
That is, this style will only be applied to those p elements that are inside the element with the id main.
Consider another example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Items: CSS</title>
</head>
<body>
<h2>List Items: CSS</h2>
<ul>
<li>list item <span class="redcolor">Red Text 1</span></li>
<li>list item 2</li>
<li>list item <span class="redcolor">Red Text 2</span> </li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
</html>
Here, the style is applied to elements with the class “redcolor” that are inside the <li>. And accordingly, the browser will color these elements in red:
But notice the space: li .redcolor. This space plays a big role and indicates just that the elements with the class redcolor should be nested in relation to the element <li>
But if we remove the space:
li.redcolor{
color: red;
}
then the meaning of the selector will change. The style will now be assumed to be applied to elements <li> that have the class redcolor. For example, to the following element:
<li class="redcolor">Microsoft: <a>Lumia 650</a></li>
But not to the element:
<li>LG: <a class="redcolor">LG G5</a></li>