CSS SELECTORS CONT

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {

   color: #000000;

}

The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

.black {

   color: #000000;

}

This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example:

h1.black {

   color: #000000;

}

This rule renders the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example:

<p class="center bold">

   This para will be styled by the classes center and bold.

</p>

The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black {

   color: #000000;

}

This rule renders the content in black for every element with id attribute set toblack in our document. You can make it a bit more particular. For example −

h1#black {

   color: #000000;

}

This rule renders the content in black for only <h1> elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors, For example:

#black h2 {

   color: #000000;

}

In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black.