CSS selectors make your task very selective. It is a component of CSS style definition. It specifies the elements upon which a particular style will be applied. In its most basic form, it is the real name of the element. Take an example into consideration. Suppose you want to change the color of all first level headings into blue. You can use the following H1 selector:

h1 { color: blue; }

In case, you want to alter the color of certain parts of your H1 headings and not all the headings, then you can make use of a class selector. You can use a class selector in the following manner:

h1.blue { color: blue; }

The function of CSS ID selectors is same as class selectors. The only difference is that ID selectors affect only one element on a particular page, i.e. element with that specific ID. These ID selectors begin with a pound sign (#). For example:

#myblueh1 { color: blue; }

You can also use CSS selectors to define a particular selector based on its location in the HTML hierarchy. These selectors are known as descendant selectors or contextual selectors. You can be more specific with these selectors. You can make each h1 heading in your document blue by using the basic selectors. But if you want to put more attention to any emphasized text, i.e. within that h1, you have to use descendant selectors. All you need to do is to declare a special style on all the emphasized text that is located within an h1 heading. In this case, you need to use spaces instead of commas to signify descendant selectors.

h1 { color: red; }
h1 em { text-decoration: underline; }

If there is more number of levels in your descendant selectors, then you can make use of wildcards to define any particular level. For instance, if you want all the q tags which are grand child elements of a div, then you can write as the following:

div * q { border: thin solid blue; }

The above style will not have any impact on any of the q’s that are outside the div tag.

Most of the web designers forget the flexibility aspect of the descendant selectors. While defining a descendant, it does not bother whether the tag in question is a direct child, a grandchild or a great-great grandchild. In the following examples, the span tag is a descendant of the ‘p’ tag.

<*p><*span> <*/span><*/p>
<*p><*strong><*span> <*/span><*/strong><*/p>
<*p><*strong><*em><*span> <*/span><*/em><*/strong><*/p>

You can see more occurrences of descendants in nested lists and tables. Web designers sometimes forget lists can have more lists inside them like the mentioned below:

<*ol>
<*li>An ordered list<*/li>
<*li>With 3 elements<*/li>
<*li>And one nested list inside it:
<*ul>
<*li>An unordered list<*/li>
<*li>With 2 bullet points<*/li>
<*/ul><*/li>
<*/ol>

If a descendant selector is put on the li tag as a descendant of the ol tag, then all the li tags defined inside the list will have the same style. For instance:

ol li { list-style-type: decimal; }

Tags: CSS Descendant Selectors