I am trying to style odd and even headers that are associated with content. They are inside several DIVs, and I am unable to get nth-child or nth-of-type to work- only the odd styles are displaying. Here is some concept code:
HTML:
<div class="content">
<h2>Welcome to my blog</h2>
<div class="post">
<h2><a href="myPostLink">This is a post</a></h2>
<div class="entry">
<p>here is some content</p>
</div> <!-- end entry -->
<div class="meta"><p>Here is meta info</p></div>
</div> <!-- end post -->
<div class="post">
<h2><a href="myPostLink">This is another post</a></h2>
<div class="entry">
<p>here is some more content</p>
</div> <!-- end entry -->
<div class="meta"><p>Here is meta info</p></div>
</div> <!-- end post -->
</div> <!-- end content -->
CSS:
.content h2 a:nth-of-type(odd){color: #444;}
.content h2 a:nth-of-type(even){color: #ccc;}
JSFiddle
My thought process was that since I was starting at .content in my CSS, the first .content h2 a would be considered odd and the second even, etc. Apparently not so- they are all considered the first child. Is there a way to select the headers in the way I want with CSS alone? Am I doing something dumb?
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .
The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.
Writing Complex :nth-child() Selectors It works exactly the same as :nth-child except that it starts from the end of the parent. For example, you can select the first three children of a parent by using the selector :nth-child(-n + 3) . You can use :nth-last-child(-n + 3) to select the last three.
Use nth-child
on the .post
elements, and then select the h2
element from there
jsFiddle example
.post:nth-child(odd) h2 a {
color: red;
}
.post:nth-child(even) h2 a {
color: green;
}
Try this
.content div.post:nth-of-type(odd) a{color: #444;}
.content div.post:nth-of-type(even) a{color: #ccc;}
The a element of odd and even divs with post class. Not quite sure if that's what you need. A working example: http://jsfiddle.net/a4j7z/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With