How can I target the odd and even divs using CSS? - html

Question

I want to apply different CSS to the odd and even divs but the current code I am using doesn't work. I just want it to target the first child, AKA the divs, and not the children of the divs.
.work-layer {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
height: 100%;
}
.work-container:nth-child(odd) {
text-align: right;
padding-right: 100px;
}
.work-container:nth-child(even) {
text-align: left;
padding-right: 100px;
}
.name {
font-size: 3em;
text-transform: uppercase;
}
.desc {
font-size: 1.75em;
width: 40%;
}
.url {
font-weight: bold;
font-size: 1.5em;
color: white;
}
.work-layer {
height: 300px;
}
.layer-textastic {
background-color: rgba(0, 133, 255, 1);
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
<div class="work-container textastic">
<div class="work-layer layer-textastic">
<h1 class="name">Textastic</h1>
<p class="desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
jordanbaron.me/Updated-Textastic-Site
</div>
</div>
</div>

Answer 1

Can’t you just change .work-container:nth-child(even) and .work-container:nth-child(odd) to .work:nth-child(even) and .work:nth-child(odd) respectively. If this is not what you want, post a picture using like MS paint of what you want it to look like.

Answer 2

Your Code with even and odd just works fine, I guess you want the text in the p-Tag also on the right side, the problem here is the width of 40% you had on the class .desc. Just add a div around with width 100%, and add float right to the text within the div (only for odd .work-container).
Edit: Instead of using the code above (and in the Snippet) you can just add the following 3 lines of code, it has the same Effect:
.work-container:nth-child(odd) p{
margin-right: auto;
}
.work-layer {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
height: 100%;
}
.work-container:nth-child(odd) {
text-align: right;
padding-right: 100px;
}
.work-container:nth-child(odd) .inner-desc{
float: right;
}
.work-container:nth-child(even) {
text-align: left;
padding-right: 100px;
}
.name {
font-size: 3em;
text-transform: uppercase;
}
.desc {
font-size: 1.75em;
width: 100%;
}
.inner-desc{
width: 40%
}
.url {
font-weight: bold;
font-size: 1.5em;
color: white;
}
.work-layer {
height: 300px;
}
.layer-textastic {
background-color: rgba(0, 133, 255, 1);
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<div class="work">
<div class="work-container textastic">
<div class="work-layer layer-textastic">
<h1 class="name">Textastic</h1>
<div class="desc">
<p class="inner-desc">I made this website as an homage to a great little text editor for iOS known as Textastic</p>
</div>
jordanbaron.me/Updated-Textastic-Site
</div>
</div>
</div>