Descendant selectors in advanced CSS allow you to define styles on elements that are basically located in specific locations in the XHTML document tree. The selectors are defined as patterns, so you can define child elements, grandchild elements and so on. So it’s all related and you will hear/read words like parent, child, sibling and ancestor. That is how CSS specificity works.
A descendant selector is a method of targeting elements as it is in a specific relationship with a set of other elements. But the descendant selector avoids the need to create or assign over many class names.
For example:
div#nav li a {}
There are host of sites that may require different styles on different pages or show different background image/color theme for each page; either of this can be done by using an ID or class on the
element.
<body id="homepage">
<h1>My Title</h1>
This defines you to specify general rules for <h1> element, and then if you want the one on your home page to be styled differently you can target for it more specifically. For example, to place different header background on each section of the site, you need to conduct the following:
h1 {color: red; background: #fff;}
#homepage h1 {background: #fff url("mybgimage.gif") no repeat;}
The second rule will target an <h1> element that has many other elements with the id of "homepage" somewhere in the ancestry. The first rule will be applied to all <h1>'s so the Home Page color will still continue to be red and it’s only the background that had been changed.
You can define a descendant selector by separating the relevant elements with a space:
div p { background-color : #ccc; }
This will definitely impact all p elements that are within a div element. But p elements that are within the body of the document will not get affected at all.
You can also use patterns to specially define your selectors:
div* em {background-color: #ccf;}
This will affect all em elements that are grandchildren of a particular div element. In other words, any em will be two elements below the div.
For example:
<div><p><em>. This one will be </em></p><em>. This one isn't</em></div>
The Descendent selector’s specificity can be calculated as follows:
- Count1 if the selector is a “style” attribute rather than a selector, 0 otherwise (=a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules will have no selectors, so a=1, b=0, c=0 and d=0)
- Count the number of ID attributes in the selector (=b)
- Count the number of other attributes and also pseudo-classes in the selector
- Also count the number of element names and pseudo-elements in the selector (=d)
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the final specificity value of descendent selectors.
