CSS selectors - Universal, type, classes, ID and advanced

Each instruction contains a selector that formats the tags of the Web page. One more indication about the syntax: formally, the selector area ends in the opening key of the declaration.

However, the declaration block belongs to the selector! Therefore, if you want to define a momentary instruction without the need to write values and properties, the selector must be at least.

h1 {}

Properties and values can be added later. But if you type the selector without the keys, you will be entering an error in the style sheet.

Let's see now the different types of selectors.

Universal Selector

The universal selector is used to select, with the help of a joker (the * character) each element of the document tree and link it to a specific instruction. A very typical instruction is the following:

* {
margin: 0;
padding: 0;
}

With this instruction the value zero is given, for example, to the distances of all the elements (*) predefined by the navigator.

Element or type selector

In our examples we have now seen the selectors of the simplest type, always referred to a specific HTML element. The reference is indicated by the label, for example:

h1 {
color: #000033;
}

To assign the same properties to several elements, we can form a group with the corresponding element selectors:

h1, h2, h3 {
color: #000033;
}

In this case we have assigned the blue color to the three types of title. Note that the selectors must be separated by commas (,)

Class selectors

In the previous example, the blue color has been assigned in block to all the titles. Suppose now that we are in a situation where some of the titles <h2> do not have to go in blue but in red and bold-as an exception. To put it this way, CSS offers us the class selector.

First, assign an own class attribute in the HTML code of the title (class = "..")

<h2 class=”rojo-negrita”>Red title bold </h2>

Now let's write on the style sheet the special instruction to be applied to that class. To do this, simply add the name of the class to the element selector, separated by a period (.), Without blank spaces.

h2.red-bold {
color: #330000;
font-weight: bold;
}

From now on you need a red and bold title, you just have to assign it the red-bold type. You can even go further. If at any given time you need a <h3> title (or any other element) in bold red - do not link the class to any other specific element.

.red-bold {
color: #330000;
font-weight: bold;
}

By writing the instruction like this, you can assign the bold red class to any HTML tag, for example:

<p class=”rojo-negrita”>Paragraph in red and bold </p>

Selectors ID

Selectors ID allow you to assign meaningful names to elements Concrete HTML Unlike class selectors, which are used for a type of elements (for example, all elements of type <h1>) and which can be used within a document as many times as desired, selectors ID are used for a single element (for example, a <h1>) and that can be used within a document as many times as desired, the ID selectors are used for a single element (for example <h1> concrete) and, therefore, it can only appear once in the HTML document.

<h1 id=”green-bold”>Green title in bold </h1>

The corresponding CSS instruction will be like this:

h1#green-bold {
color: #003300;
}

The syntax resembles that of the class selector, but the HTML attribute is now id = "...", and in the style statement the pound (#) character is used instead of the dot (.) Here you can also omit the definition of the element (in this case <h1>) so that the selector can be applied to any element.

#green-bold {
color: #003300
}

Always remember that IDs can only be used once in each document, so they are especially appropriate for identifying containers of page areas, such as headers, navigations, content, feet and Similar.

The IDs can also be used to access the element with a script (for example JavaScript or PHP).

Advanced selectors

In large Web projects, over time they accumulate a large number of specific formats for various documents. The result, often, is a source code plagued of classes of all type for each page, reason why when making modifications, or adjustments, it is easy to ignore some detail. For situations like this the most practical thing is to use the contextual selectors in the style annotations.

Descendant selectors

Suppose you have a page with all the style instructions and you want to add a special information box with a proper color for some of the paragraphs of text.

The color defined for writing in general has been black. For that reason, we have created a special class for this specific case: class = "red" and we have assigned it to the corresponding paragraphs of text:

<div id=”specialinfo”>
<p class=”rojo”>Regular text</p>
<p class=”rojo”>more text</p>
<p class=”rojo”>more text</p>
</div>

In itself, it would not be correct, but we would inflame the code, we would have to write a lot more, and in the end we would lose the perspective of so much class: the modifications and adjustments would be increasingly complicated and susceptible to error. In such a case it is best to use the contextual selectors. Instead of assigning a class, we assign the format of <p> in the context of its immediately superior element. What in our example would be:

#specialinfo p {
color: #ff0000;
}

That means that inside the element with the #specialinfo ID (and only there) all

will have the color red (# ff0000).

The source code remains the same, without any special class:

<div id=”specialinfo”>
<p>Text in general </p>
<p>more text</p>
<p>more text</p>
</div>

Descending selectors can be embedded in more levels. Suppose you have defined the underline for the links that appear in the context of an element whose ID is #content:

#content a {
text-decoration: underline;
}

Suppose you also need to appear in a <ul>; list; but without underlining. What you have to do is add in the style sheet:

#content ul a {
text-decoration: none;
}

When selectors have several levels of nesting, it is best to read them from back to front:

Links that appear in a <ul> list will not be underlined-but only if the list is within an element with the ID #content

The code The corresponding HTML would look like this:

<div id=”content”>
<p><a href=”foo.html”>Link text</a></p>
<ul>
<li>
<a href="foot.html">Link text</a>
</li>
</ul>
</div>

The first link is underlined, the second is not. And no additional class is needed here either.

Let's look briefly at the kinship relationship that appears in the example we have just seen:

#content ul a {…}

The element <a> is here son of <ul> and, therefore, grandson of #content. But the grandson is only accessed when his parent element is explicitly an <ul>. If you want to access the grandchild in any case, regardless of the type of parent, you must write the instruction as follows:

#content * a  {…}

That way, you can access all <a> grandchildren of #content, but not when <a> are children of #content.

Naturally, you can also group several elements together with all their descendants to assign the same instructions to all. In doing so, however, you should bealways write the same selector:

#content h1, #content h2, #content h3 {
font-family: Georgia, serif;
font-size: italic;
}

A common mistake is to indicate the entire selector only in the first element:

#content h1, h2, h3 {
font-family: Georgia, serif;
font-style: italic;
}

That would mean that <h2> and <h3> would also receive that format when they appear inside the container with the ID #content

This type of writing keeps the code as small and clear as possible. In addition, it allows to classify very well the different blocks within the style sheet and thus maintain the overview of the formats applied to each element.

There are many other contextual selectors that, unfortunately, have not received much support so far, especially from IE.