CSS online training course

CSS lesson 4, Combining selectors

Different kind of selectors

The universal selector * counts for every element.
If this is the only selecter he can also be left out.
*.html {margin:1;padding:1;}

Decendant selectors are used to apply styles elegantly to specific areas of your page while it also lessens the neccesity for embedded classes within elements.
div.navi ul {font-size:1.4em;}
For all ul elements within the div with a class .navi they will get font-size:1.4em

Decendant selectors are used to select elements who are decendant from another element in the document tree.

If you are starting a new document its a good idea to style this with the help of decendant {link} properties, namely for the common items like the <h1> en <p> tags.
In this way even if there is only one type of <h1> in the document you can be sure of it that it will not be adapted when the styles will be altered in the future when another type of <h1> is added.
See this example:
h1 { border-bottom: solid 6px #ccc; }
The following CSS code :

The Html code:

The result:

The explenation:
H1 em { color:red:} em { color:red:}
H1 em{ color : blue;}

Combining selectors

Different kind of selectors may be combined.
This way you can make rules who apply in specific context.

A example combination of a ID and class selector:
The CSS code:
#navigate .edge{
border: 10px solid #ff0;
}

The HTML code:
<div id="navigate"> <p class="edge">Hello</p>
</div>

Result:

The border is only applied to elements which are called through < id navigation > and the value class <edge.>.

A example of a combination tag and a class selector.

The CSS code:
p.bold{
font-weight: bold;
}

In HTML:
<p class="bold"> Pete Jefferson, Nicestreet 21, 9584 New York<p>

The CSS rule is applied for all <p> elements with the class bold.
The result will look as folowed:

Example of a combination of two tag selectors:

table p{
border: 10px solid #ff0;
}

Border is only being applied to <p>s within a <table>

Example of a combination of 3 tag selectors:

#navigate table
p{
border: 15px solid #0000A0;
}

Border is only being applied to <p> within a <table> in addition the table has to be within a element with the ID navigate.