vanloc vanloc - 24 days ago 9
CSS Question

How to divide content with CSS even, odd?

I have a page with content like that.

#################################
# __________________________ #
# | | | #
# | | | #
# | text | IMAGE | #
# | | | #
# |_______|__________________| #
# #
# __________________________ #
# | | | #
# | | | #
# | IMAGE | text | #
# | | | #
# |_______|__________________| #
#################################


With my code like this:

<!-- <p> -> <image> -->
<div class="even_odd">
<p></p>
</div>
<div class="even_odd">
<img src="" alt="">
</div>

<!-- <image> -> p -->
<div class="even_odd">
<img src="" alt="">
</div>
<div class="even_odd">
<p></p>
</div>


Now, I want to set default CSS:

When number is
odd
, it will set
text
to
float: left
,
image
to
float: right
.

When number is
even
, it will set
image
to
float: left
,
text
to
float: right
.

Currently, I must do like this:

.even_odd:nth-child(1), event_odd:nth-child(4), ..... many and many child .... {
float: left;
}

.even_odd:nth-child(2), event_odd:nth-child(3), ..... many and many child .... {
float: left;
}

Answer

We Try This CSS Selector.

selector:nth-child(odd) {
    property
}

selector:nth-child(even) {
    property
}