CODEWITHSUNDEEP
htmlcssinheritance
Joe Austin
Joe Austin

Reputation: 557

CSS inheritance: parents and childrens' children

Task: Underline emphasized text inside an ordered list inside any paragraph of the 'note' class. This is what I have so far...

.note>p>ol>em{text-decoration:underline;}

I'm struggling to get this going. What's' wrong with my code?

***edit: I have also tried this to no avail:

.note p ol em{text-decoration:underline;}

***edit: This is the HTML I've been using to test it...

<div class = "note">
        <p>
        Modifiers are sometimes included along with the basic command, inside...
        </p>

        <table align ="center" border = "3" >
            <td>
                <p>Three things: 
                    <ol type = "i">
                        <li><em>First</em></li>
                        <li>Second</li>
                        <li>Third</li>
                    </ol>
                </p>
            </td>
        </table>
    </div>

Upvotes: 0

Views: 218

Answers (4)

David Thomas
David Thomas

Reputation: 253506

The underline the em text within the ol within the table within the div.note:

.note table ol em {
    text-decoration: underline;
}

JS Fiddle demo.

I've left out the implicit elements, because I'm assuming valid HTML, so the em can only be within an li inside of the ol; the ol itself can only be within a td (or th) inside the table.

The table cannot be within a paragraph (and if you try to put it within a paragraph the browser will move that element, unpredictably; but it will be moved, since it'll only create a valid DOM tree).

Upvotes: 0

Andrew Clody
Andrew Clody

Reputation: 1181

You can't, because the HTML isn't valid. The OL can not be a child of the P.

http://www.w3.org/TR/html-markup/p.html

A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is not an a element.

So

<p class="note">
<ol>
    <li>One</li>
    <li><em>Two</em></li>
    <li>Three</li>
    <li>Four</li>
</ol>

and

<p class="note"></p>
<ol>
    <li>One</li>
    <li><em>Two</em></li>
    <li>Three</li>
    <li>Four</li>
</ol>

are basically the same.

Upvotes: 3

Wipster
Wipster

Reputation: 1570

The > operator only gets the elements on the first level. When they are wrapped by any other element like a span for example the selector won't work. Just use 

.note p ol em { text-decoration: underline; }

Example:

<div class="test">
  <div>
    <span></span>
  </div>
  <span class="example"></span>
</div>

div.test > span {} /* Only works for the span with the example class */
div.test span {} /* Works for both spans */

Upvotes: 0

FLX
FLX

Reputation: 2679

.note>p>ol em

Just remove the last >,

Or add a class to the list and do

.class em (better performance)

Upvotes: 0

Related Questions