HTML elements which are inside other HTML elements are known as child elements. It is possible to style these elements in three ways. Somewhat confusingly this is referred to as styling "descendant" elements, styling "child" elements or styling "sibling" elements:
- child elements are those which are immediately "in" another
- descendant elements include child elements but also all other elements inside the main element
- sibling elements are inside the same "parent" element
Imagine a DIV (CLASS="images") which contains a set of floated DIVs (here just two). Each of those contains an image (blue border) and some text in paragraphs (green):
The floated DIVs (red) are all children of the main DIV (black) and siblings of each other. The images and the paragraphs (blue and green) are not children of the main DIV but they are descendants of it. They are children of children!
Styling descendant elements
This will style any DIV which is contained in a DIV with the class "container":
div.container div {
}
A common use is to style menus. The menu is given the class "menu" and LI elements within are styled without having to give each one a class.
Styling child elements
If you only want to style the immediate children of an element use the greater than symbol:
div.container > div {
}
This will apply the styles to only the direct children of the first DIV. Any DIVs inside those will not be styled.
Styling sibling elements
To style sibling elements which are next to each other you use a plus sign:
p + ul {
}
This will apply styles to any UL element which comes after a paragraph (but not one which comes after a heading or another list for example).Sibling example
Pseudo-classes and descendants (or children)
You have already learned that pseudo-classes can be used to change elements when things happen. It is also possible to use pseudo-classes to change child elements. Here there are two DIVs. One is inside the other:
div.thumbnail {
position:relative;
height:100px;
width:100px;
background-color:green;
}
div.pic {
position:absolute;
top:0px;
left:110px;
height:300px;
width:300px;
background-color:red;
visibility:hidden;
}
The thumbnail will be visible. The full size picture (pic) will be invisible. One more style makes the main picture visible when you hover over the thumbnail:
div.thumbnail:hover div.pic {
visibility:visible;
}
Place the styles above in a stylesheet and this XHTML in the BODY:
<div class="thumbnail">
Thumbnail here
<div class="pic">
Full size pic here
</div>
</div>
Ideally replace the background colours with images of appropriate sizes but you should see the effect without them. Watch out for images appearing off the screen using this method. Maybe images should all appear in a fixed position on the screen?Create a dropdown menu
Pseudo-classes and first children
The terminology may getting a bit surreal but the principle is good:
p:first-child {
}
That will apply styles only to the first paragraph inside any other element (the BODY or a DIV). You could apply the styles only to the first child element of a specific class of element:
div.comment > p:first-child {
}
