Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use nth-of-type to select nested children

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?

like image 342
ricky Avatar asked Dec 15 '13 20:12

ricky


People also ask

How do Nth children choose multiple children?

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.

What is the difference between the nth child () and Nth of type () selector?

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 .

Which nth child () selector will target only the last list item?

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.

How do you target the nth child in SCSS?

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.


2 Answers

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;
}
like image 149
Josh Crozier Avatar answered Oct 22 '22 10:10

Josh Crozier


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/

like image 38
MaGnetas Avatar answered Oct 22 '22 10:10

MaGnetas