Adjacent selectors

Selectors are called adjacent when they follow each other in the document’s code. Let’s examine some examples of relations of the elements.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Tag <B> is child, because it is located inside of this package. So, tag <P> is used as a parent of tag <B>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Tags <VAR> and <B> are adjacent elements.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Tags <B> and <I>, <I> and <TT> are also adjacent.

A symbol plus (+), which is determined between two selectors, is used to control the style of adjacent elements. The syntax:

<Selector 1 + Selector 2 { Description of style rules }>

Adjacent selectors are not supported by Internet Explorer.

Example 10.1. The use of adjacent selectors.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Adjacent selectors</title>
  <style type="text/css">
   B + I {
    color: red; /* Red colour of the text */
   }
  </style>
 </head>
 <body>
  <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> 
  adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing 
  elit.</p>
 </body>
</html>

The result of this example is shown in the figure 10.1.


Figure 10.1. Highlighting with colour with the help of adjacent selectors.

Sometimes it is necessary to include different footnotes and annotations to the text. In this case a new style class is applied to the paragraph usually. It is easy to change the overall view of the text in this way. But let’s use adjacent selectors. First of all, create a new class, name it sic and apply it to the tag <H2>. The first paragraph after such title is highlighted with background colour and indent (example 10.2). The overall view of the other paragraphs will not change.

Example 10.2. Changing the style of the paragraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Changing the style of the paragraph</title>
  <style type="text/css">
   H2.sic {
    font-size: 140%; /* Font size */
    color: maroon; /* Colour of the text */
    font-weight: normal; /* Normal type face */
    margin-left: 30px; /* Left indent */
    margin-bottom: 0px; /* Top indent */
   }
   H2.sic + P {
    background: #ddd; /* Background colour */
    margin-left: 30px; /* Left indent */
    margin-top: 0.5em; /* Top indent */
    padding: 7px; /* Fields around the text */
   }
  </style>
 </head>
 <body>
   <h1>methods of lion hunting in the desert</h1>
   <h2>Method of the consecutive search</h2>
 
   <p>Let the lion has the overall size L x W x H, where L - the lion's size from the tip of the nose up to the tuft of the tail, W - its width, and H - it's height. After that we divide the desert into several elementary rectangles, the size of which coincides with the width and size of the lion. Taking into consideration that lion can stand not on the exactly specified territory, but on two of them at the same time, the cage should be made of the doubled area, that is, 2Lx 2W. owing to this we'll avoid the error, when.</p>
 
   <h2 class="sic">Important note</h2>
   <p>For the simplification of the accounts, the tail as the measurement error can be set aside and taken into consideration.</p>
 
   <p>Later we cover every marked rectangle of the desert with the help of the cage and check, has the lion been caught. As soon as the lion appear in the cage, cedure can be considered as completed one.</p>
 
 </body>
</html>

The result of this example is shown in the figure 10.2.


Figure 10.2. Changing of the overall view of the paragraph by using adjacent selectors.

Example 10.3. Indents between the title and the text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Adjacent selectors</title>
  <style type="text/css">
   H1 + H2 {
    margin-top: -10px; /* Depose the headline 2 up*/
   }
   H2 + P {
    margin-top: -1em; /* Depose the first passage up to the headline */
   }
  </style>
 </head>
 <body>
  <h1>Title 1</h1>
  <h2>Title 2</h2>
  <p>Paragraph!</p>
 </body>
</html>