So far, the CSS selector is explained to be as “the name of the HTML element which is the object to which the style is applied”. However, this definition is expanded to include other types of selectors. One of the cases is where you want to apply different styles to individual elements when there are two or more elements of the same name in an HTML file.

For example, in the previous chapter, we have studied the case where we selected the “p element” as a selector and tried to specify the presentation (style) of it. If we specify the “p element” in this way, the particular style is applied to all “p elements” in that HTML file.

This is very convenient, because you can define the style of the whole HTML file by making just one setting. However, what about the case shown below? How can you deal with this kind of situation?

For example, as shown below, you can have a situation where there are two “p elements” in the HTML file and you want to display one of them in large letters, and the other in normal size but in red letters.

<p> 
  I want to display this paragraph in large letters.
</p> 
<p> 
  I want to display this paragraph in red and normal size letters.
</p> 

At this time, if you make the CSS setting as follows, the two paragraphs above would both be displayed in large letters.

p {
  font-size: 1.5em;
}

On the other hand, if, instead of setting it up as above, you make the setting as follows, then both of the two paragraphs would be in normal size letters and the color of the characters would be red.

p {
  color: red;
}

To deal with this kind of situation, it is arranged that you are allowed to give different styles to one element as you please, depending on the situation. You can achieve this by attaching a class selector consisting of a period “.” and an arbitrary name called class name to the HTML element to define a style. The following is an example of general description of class selector.

element name.class name  { property: value; }

For example, if we use this class selector to give two definitions to the p element, the result would be as follows:

p.bigfont {
  font-size: 1.5em;
}

p.redchar {
  color: red;
}

To use the style defined by this class selector in the HTML file, you add the class attributeto the starting tag of the corresponding element and specify the class name as the value of that. The following is a general way of making a reference to the class selector in the HTML file.

To apply the setting defined by the two class selectors mentioned above in the HTML file in the above example, you change the HTML file as follows:

<p class="bigfont"> 
  I want to display this paragraph in large letters.
</p> 
<p class="redchar"> 
  I want to display this paragraph in red and normal size letters.
</p> 

The following examples show the one before the class selector is applied and the one after that:

As discussed in the preceding section, by using the class selector, you can specify a different style to the same element in which you add a class name to the element name to formulate a selector.

Expanding this even further, it is so arranged that you can define a certain style and apply that style to various HTML elements.

To do that, you either omit the element name when you formulate the class selector or use “*” instead of the element name. This is called a universal selector. In other words, as shown below, if you use the universal selector, you can define a style independently from HTML elements (i.e., to all the HTML elements).

.class name  { property: value; }   or   *.class name  { property: value; }

To make reference to a universal selector, add the class attribute to the HTML tag as you do for the normal class selector.

For example, if you define a universal selector called “bigf” in the CSS file,

.bigf {
  font-size: 1.7em;
}

you can use the “bigf” style for various HTML elements as shown in the HTML document below.

<p class="bigf"> 
  In this paragraph, I want to display it in large letters.
</p> 
<blockquote class="bigf"> 
  I want to display this blockquote element in large letters as well
</blockquote> 

By specifying (referencing) multiple styles defined by the class selector at the same time, you can apply a combination of styles to an HTML element.

You can do that by giving multiple class names one after another as a value of class attribute, separating them with a white space. In other words, you can use a combination of styles which has been defined by “n” sets of class selector in the following manner:

For example, if we have defined the following selectors in the CSS file as we have done before,

p.bigfont {
  font-size: 1.5em;
}

p.redchar {
  color: red;
}

when we modify the HTML document as shown below, the style in which font size is 1.5 times as large as the normal size (1.5 em) and color of the characters is red will be applied.

<p class="redchar bigfont"> 
  This paragraph will be displayed in red characters whose font size is 1.5 times 
  as large as the normal size (1.5 em).
</p> 

You can apply a certain style to a “situation” rather than an element name. This is called a “pseudo class”.

With the pseudo class, a style is generally defined in the following manner. Please note that the name of the pseudo class is preceded by a “: (colon)”.

element name.class name:pseudo class name  { property: value; }

If the class name is omitted, it becomes a style definition for every element being defined. Further, in some cases a pseudo class has a fixed element as its object (for example, :link, :visited, etc.). In that case, the element name is not required when you define the style.

Here, I would like to explain the link pseudo class which is used to decorate the link, changing the color, etc. (:link and :visited), and dynamic pseudo class (:hover, :active, and :focus).

The link pseudo class is, as the name suggests, a pseudo class to define the style of display for the link (a element).

:link pseudo class

This link defines the expression of a not-yet-visited link (a link to a page which you have not visited before).

:visited pseudo class

This link defines the expression of already-visited link (a link to a page which you have visited before).

As the link pseudo class is a pseudo class to decide the style of the a element, you can omit the element name, a, when you define it.

For example, it you have defined the following pseudo class in the CSS file, the not-yet-visited link is displayed in red and the already-visited link is displayed in dark blue.
(The element name, a, is not omitted in this instance; however it can be omitted.)

a:link {
  color: red;
}

a:visited {
  color: darkblue;
}

The dynamic pseudo class controls the style applied to such element that changes its display in response to the mouse operation or key input made by the user (the one who is browsing the Web page). However, we have only one element now to which this pseudo class can be attached; i.e., a element, among other HTML elements we have studied so far; therefore, at this stage you may think that this is a pseudo class which is attached to the a element.

There are three dynamic pseudo classes; namely, :hover, :active, and :focus. The function of each is shown as follows:

:hover pseudo class

This is applied to an element when the element is pointed at by the mouse, etc., but has yet to become active (has not been clicked).

:active pseudo class

This is applied to an element when the element is active by mouse operation. For example, this is applicable to the time after the user (the one who is browsing the Web page) has clicked the mouse or pressed the enter key, but has not yet released his/her finger from the mouse or the key on the element.

:focus pseudo class

This is applied to an element when the element is focused on. For example, this is applicable to a text input form (a box in which you enter text) which is currently focused on (i.e., ready for text input).

Generally, the dynamic pseudo class, together with the link pseudo class, is applied to the a element for the purpose of defining the behavior of the linked text.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: yellow;
}

If you have made such definition as above, the content of the a element (linked character) is set in such a way that the color of the character is displayed as follows:

• The linked characters linked to the page which you have not visited before is displayed in blueに
• When you place a mouse pointer on a linked character, it is displayed in redに
• While you are pressing down the mouse button, the linked characters are displayed in 、 yellowに
• The linked characters linked to the page which you have visited before is displayed in purpleに

If you follow the link below, you can find an HTML page to which the style above is applied. Please click the link below to display the page. When the sample page is displayed, please actually try; for example, move the mouse cursor onto the linked characters or continue to press down the mouse button at that point to see how the color of linked characters changes.