CODEWITHSUNDEEP
css-selectors
guangzan
guangzan

Reputation: 71

How to select even items of all elements

The HTML structure is as follows. Could you please tell me how to use CSS to select even items of all P elements? Thanks!

<section>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
</section>

Upvotes: 1

Views: 492

Answers (2)

amdev
amdev

Reputation: 7442

you just can use this selector: 

.item > p:nth-child(even) {
  /* some styles here */
}

.item > p:nth-child(odd) {
  /* some styles here */
}

this will select all direct child of .item class and apply your odd or even styles to them, if you want to dismis the direct relationship selection, just use .item p:nth-child(even) { ... }

Upvotes: 1

G&#246;ksel &#214;ZER
G&#246;ksel &#214;ZER

Reputation: 267

Set background all P element

p {
background-color:red;
}

Set background all item class

.item{
background-color:red;
}

Set background with id that unique. ID is unique. This can set just one element.

#unique {
background-color:red;
}

Does this answer your question?

Upvotes: 0

Related Questions