CSS quiz/refresher Jan31 '06

CSS gurus, what’s the difference between:

p a

p .a

p.a

p > a

p + a

Take a few minutes to sort it through, in your head, and then check my answers below - and be sure to correct my mistakes.

p a

p a
{
    font-weight: bold;
}

This will match any <a> element, inside any  element. Both of the following examples apply font-weight: bold; to the <a> elements:

<p><a href="..."></a></p>

<p>
    <ul>
        <li><a href="..."></a></li>
    </ul>
</p>

So, no matter how deeply nested each <a> element is - as long as they’re somewhere inside a  element, they will be targeted.

The following example is incorrect:

<ul>
    <li><a href="..."></a></li>
</ul>

There are no  tags surrounding this list, so the style will not be applied.

p .a

p .a
{
    font-weight: bold;
}

This will target any element with the generic class of "a," contained within  elements. So, for this example, we’re no longer referring specifically to <a> elements. We could be referring to any element, but the <a> elements could also have a class of "a" applied.

All of the following examples correctly apply font-weight: bold; to the elements:

<p>
    <p class="a"></p>
</p>

<p>
    <ul>
        <li class="a"></li>
    </ul>
</p>

<p>
    <a href="..." class="a"></a>
</p>

p.a

p.a
{
	font-weight: bold;
}

This will target any  element with a class of "a."

There is a distinct difference between this selector, and the previous: p .a. Notice the space between the p and the dot. This subtle "space" means something entirely different, so be careful.

The only elements this selector will target is this one:

p > a

p > a
{
	font-weight: bold;
}

This will target any <a> elements, which are children of any  element. A child is a direct descendant. Therefore, the following example will be targeted:

<p>
    <a href="..."></a>
</p>

The <a> element is a child of the  element, so it’s targeted.

This example is incorrect:

<p>
    <ul>
        <li><a href="..."></a></li>
    </ul>
</p>

This example has the <a> element as a child of the <li> element, not the  element. In fact, the <a> element is a great-grandchild of the  element.

p + a

p + a
{
	font-weight: bold;
}

This will target any <a> element that’s an adjacent sibling to a  element. The following example illustrates this:

<p></p>

<a href="..."></a>

<ul>
    <li></li>
</ul>

Here, the <a> element is a sibling of the  element, and most importantly - the <a> element is directly adjacent to the  element, meaning next to.

This example is incorrect:

<p></p>

<ul>
    <li></li>
</ul>

<a href="..."></a>

Here, <a> is no longer an adjacent sibling, to the the  element.

Categories: CSS

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

They're all right except the last one, p + a. In your example, a is actually a child of p, not a sibling. Here's a correct example, I believe: ... Read more.

Ah yes... that is correct. Thanks for pointing that mistake out. I confused "sibling" and "child" for that one... ... Read more.

Great info here...I did not know that '+' and '>' were even applicable to a style sheet! ... Read more.

Amanda... good idea... And, in reality, '+' and '>' are very useful, but IE 6 doesn't understand them, so they're virtually useless until IE 7 ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.