Child selectors

Child selector is the element, which is located in the parental element. Let’s examine the code in the example 11.1.

Example 11.1. Nesting of the elements in the document.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <body>
  <div class="main">
   <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat. </p>
   <p><strong><em>Ut wisis enim ad minim veniam</em></strong>, 
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</p>
  </div>
 </body>
</html>

In this example several packages are used, which are located one in another. See the tree of elements in the figure 11.1.

Figure 11.1. The tree of elements for the example 11.1.

Nesting of the elements and their hierarchy is presented on the picture 11.1 in the convenient form. The child element here against the tag <DIV> is the paragraph <P>. At the same time the tag <STRONG> is not the child one for the tag <DIV>, because it is located in the package <P>.

Child selector is a selector, which is located in the parent element in the tree of elements. Syntax of such selectors:

Selector 1 > Selector 2 { Description of the style rules }

The style is applied to the Selector 1, but only in case it is child for Selector 1.
Child selectors are not supported by Internet Explorer.
The difference between contextual and child selectors is in the fact that the style for child selector is applied only in case it is located in the parent element. Any level of nesting is allowed for contextual selector. Let’s examine the code in the figure 11.2 to make it clear.

Example 11.2. Contextual and child selectors.

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
<!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>Child selectors</title>
  <style type="text/css">
   DIV I { /* Contextual selectors */
    color: green; /* Green colour of the text */
   }
   DIV > I { /* Child selector */
    color: red; /* Red colour of the text */
   }
  </style>
 </head>
 <body>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat.</p>
   </div>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat.</p>
  </div>
 </body>
</html>

In this example the italic font will be displayed green, because the child selector is indicated incorrectly.
You may refuse the use of child selectors and change them with contextual selectors.
In the example 11.3 changing of overall view of the list with the help of styles is shown. So, we get the kind of menu as a result of nesting of one list into another. The titles are located horizontally, and the group of links is located vertically above the titles (figure 11.2).


Figure 11.2. The list as a menu.

The style attribute float is added to the selector LI to locate the text horizontally.

Example 11.3. The use of child selectors.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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>Child selectors</title>
  <style type="text/css">
   UL#menu > LI {
    list-style: none; /* Remove list markers */
    width: 120px; /* Width of the element in pixels */
    background: #ddd; /* Background colour */
    color: maroon; /* Colour of the text */
    padding: 5px; /* Fields around the text */
    font-family: Arial, sans-serif; /* Sans-serif type*/
    font-size: 90%; /* Font size */
    font-weight: bold; /* Heavy faced type*/
    float: left; /* Locate elements horizontally */
   }
   LI > UL {
    list-style: none; /* Remove list markers */
    padding: 0px; /* Remove indents around the elements of the list */
    padding-top: 5px; /* Add the top indent */
   }
   LI > A {
    display: block; /* Links are displayed as a block */
    font-weight: normal; /* Normal type face of the text */
    font-size: 90%; /* Font size */
    background: #fff; /* Background colour */
    border: 1px solid #666; /* Border parameters */
    padding: 5px; /* Fields around the text */
   }
  </style>
 </head>
 <body>
  <ul id="menu">
   <li>Editor</li>
   <li>Edit
    <ul>
     <li><a href="undo.html">Cancel</a></li> 
     <li><a href="cut.html">Cut</a></li> 
     <li><a href="copy.html">Copy</a></li> 
     <li><a href="paste.html">Paste</a></li> 
    </ul>
   </li>
   <li>Type face
    <ul>
     <li><a href="bold.html">Heavy faced</a></li> 
     <li><a href="italic.html">Italic</a></li> 
     <li><a href="emphasis.html">Nice</a></li> 
    </ul>
   </li>
   <li>Size
    <ul>
     <li><a href="small.html">So-so</a></li> 
     <li><a href="normal.html">Normal</a></li> 
     <li><a href="middle.html">Average</a></li> 
     <li><a href="big.html">Unchildish</a></li> 
    </ul> 
   </li> 
  </ul>
 </body>
</html>