CODEWITHSUNDEEP
csscss-selectors
Abhishek
Abhishek

Reputation: 4340

How to use CSS3 selectors to select every even element

So this is the current code structure:

<section>
    <article>
        <p>Title</p>
        <p>Content</p>
    </article>

    <article>
        <p>Title</p>
        <p>Content</p>
    </article>

    <article>
        <p>Title</p>
        <p>Content</p>
    </article>
</section>

How do I get the first and the third title to float:left, and the second title to float:right...?

I tried this:

section article p:first-child:nth-child(even){
    float:right;
}

But I got no luck... :-(

Upvotes: 2

Views: 539

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Just change it to this

section article:nth-child(even){
    float:right;
}

http://jsfiddle.net/jasongennaro/cFTDj/3/

Upvotes: 0

OverZealous
OverZealous

Reputation: 39570

I think want you want is:

section article:nth-child(odd) p:first-child {
    float: left;
}

section article:nth-child(even) p:first-child {
    float: right;
}

You've actually selected the first child <p> that is also even, which, of course, can never happen.

Upvotes: 1

moe
moe

Reputation: 29714

section article p:first-child {
    float: right;
}
section article:nth-child(even) p:first-child {
    float: left;
}

Upvotes: 4

Related Questions