Combinators

Combinators allow you to crete new selectors from existing ones. So far, we have three types of selectors.

• Select by tag name by using the tag name. Examples h1, h2, li
• Select by class by using .className
• Select by id by using #idName

We have seen a combinator already, the comma operator (,). It is an "or" operator. For example the style declaration

h1, h2, .display
{
    text-align:center;
}

causes all h1, h2 elements and any element marked with class display to be selected.

Today we meet two more. The space operator (yep, a space) is the "descendant" operator. For example

div p
{
    /*rules*/
}

select any paragraph inside of a div element. Here is another example.

ol ol
{
    list-style-type:lower-roman;
}

selects all ordered lists inside of an ordered list and causes them to be enumerated with lower-case roman numerals.

The second is the > "child" operator. The selector

div > p

causes any paragraph whose parent is a div to be selected. How does this differ from the space operator? The selector

div p

causes any paragraph that has a div as an ancestor to be selected.

You can learn about more combinators here.

You can learn about :hover here. You will want it for the inline-block exercise.