Dev Corner

Problem
To use CSS to apply styles to HTML document is a very good practice. But how to select more accurately different parts of a HTML document and how to apply different properties to HTML of the same type ?

To solve this problem to our help come the CSS selectors.

A valid CSS rule is build of two parts: a selector and a series of declarations. The selector point to what type(s) of HTML element(s). The declarations, made of properties and values, are to define the applied style. In this article we will try to make clear what actually are the selectors and which are the most used kinds of them.

Element Type Selector

The element type selector is the most common selector. It specifies one HTML element in general. When there are no other style rules, which could be applied to the element in the selector, this rule applies to all such elements on the page.

For example, we customize the text and the background color of all paragraph in the current document. They will be as green text on a yellow background:

p{
   color: green;
   background-color: yellow;
}

Class Selectors

If we want to apply the same style rule to a group of elements, then we should use the class selector. First we will define a class in the style sheet. Then we will mark to which elements belong to this class, as we use the class attribute of the HTML element.

To define a class in a style sheet, we must type a period (.) before the class name. No space is allowed between the period and the class name.

The next example defines a class named myClass :

.myClass{
   font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}

Then we add class=”myClass” to the elements that we want to use this style:

<h3 class="myClass">The headlines today</h3>
<p class="myClass">You can receive actual information about the news today</p>

ID Selectors

An ID selector let us to target a single HTML element within a document. The ID selector must be defined in the style sheet and then added to the HTML tag. We should use the sharp (#) symbol to make an ID selector in the style sheet and the id attribute to give an element an ID. IDs should be unique within a document; no two HTML elements in a single document should be given the same ID.

The next example describes a style for an element with the ID one:

#one{
   font-size: 70%;
}

The next lines give an example how the id attribute should be used so that the element to be affected by the rule above.

<h4 id="one">This a unique element of the document.</h4>

Descendant Selector

The descendant selectors are connected with the structure of the HTML document. They are used when there is a given element and we would like to customize an element, which is contained in the first one. So the second one is a descendant of the first.

For example take the code below:

li strong {
   font-weight: bold;
   font-size: 1.2em;
}

The rule above will affect the first strong element below, because it is a descendant of a li element. But it wont affect the second.

<ul>
    <li>First thing</li>
    <li><strong>Second</strong> thing</li>
    <li>Third thing</li>
</ul>
<strong>This wont be affected.</strong>