Trying to use CSS class Together with Nth- child selector

Question

Hi I have looked at a variety of resources including Stackoverflow on how to use an Nth child selector and Class together and so far I am still failing.

Essentially my menu has Main categories (class =cat) and sub categories (class=subcat)

I want Each of the Main categories to be coloured differently. sub categories all stay the same. it is likely there may be multiple subcats in between each main cat. So, example:

Beef
steak
roast
Chicken
Breast
drumsticks
wings
Fish
Salmon

I can make it work so long as I don't put the class in - the instant the class goes in the nth-child selector fails.

css:

    #nav ul li.cat a {
display:block;
background-color: #265054;
font-size: 1em;
padding-left: 25px;
height: 18px;
padding-top: 2px;
margin: 1px 0px;
color: #FFFF00;

}

#nav ul li.cat a:nth-child(2)  {
background-color: #728c8c;
}

Code:

<?php 
    if (count($navlist)){ 
        echo "<ul>"; 
        foreach ($navlist as $key => $list){ 
            foreach ($list as $topkey => $toplist){ 
                echo "<li class='cat'>"; 
                echo anchor("welcome/cat/$topkey",$toplist['name']); 
                echo "</li>\n"; 

                if (count($toplist['children'])){ 
                    foreach ($toplist['children'] as $subkey => $subname){ 
                        echo "\n<li id='subcat'>"; 
                        echo anchor("welcome/cat/$subkey",$subname); 
                        echo "</li>"; 
                    } 
                } 
            } 
        } 

        echo "</ul>\n"; 
    } 
?>

Many Thanks for all your help !

What browser are you using? nth-child is only supported on IE as of version 9. — Erik Funkenbusch
– Erik Funkenbusch, Commented Apr 5, 2012 at 22:46
Care to supply an example of how you've structured your HTML? I suspect that's the real trouble. — Tieson T.
– Tieson T., Commented Apr 5, 2012 at 22:53
Good Question. If all my Main Categories were to have the same coloured background, then I would not need an Nth-child selector. However, I want each Main category to have a different colour depending on their position in the sequence rather than their content .. so the first might be blue, the second red and so forth — Vince
– Vince, Commented Apr 5, 2012 at 22:55
Here is my HTML - it is wrapped up in in Codeigniter / PHP: Sorry Guys - I have no lcue how to use this strange way of entering code into the site so it comes out formatted. — Vince
– Vince, Commented Apr 5, 2012 at 23:03

Marcel · Accepted Answer · 2012-04-05 23:47:22Z

1

Your selector is wrong, here it is corrected, and since you only want to style the main categories styled, I've added a > child selector.

#nav ul li.cat:nth-child(2) > a  {
  background-color: #728c8c;
}

Demo: jsfiddle.net/kjxtg

edited Apr 5, 2012 at 23:47

answered Apr 5, 2012 at 23:11

Marcel

28.1k9 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vince Over a year ago

thanks marcel but unfortunately that didn't work. I just ignored the nth child selector

Marcel Over a year ago

@VinceJacobs: Seems to work fine in this demo.

Vince Over a year ago

Heah Marcel - you are a super star ! I need to figure out what is going on .. perhaps my html isn't right. Many thanks !

Vince Over a year ago

There musty be something odd in my HTML because I can not get your solution to work in my HTML .. I'd like to post my HTML but for the life of me I can not see how to do that in this site - I'm used to PHP freaks where it seems more obvious,

Marcel Over a year ago

@VinceJacobs: Edit your original question at the top, paste in the HTML, highlight it and click the button that looks like {}, it's 5th from the left.

Tieson T. · Accepted Answer · 2012-04-05 23:03:58Z

0

If your goal was simply to have the children of each category have a different color, try this fiddle: http://jsfiddle.net/2yqaz/. If you look at the HTML markup, you'll see the "common" way of marking this up:

<nav>
    <ul>
        <li class="cat">
            <a href="">Beef</a>
            <ul>
                <li><a href="">Steak</a></li>
                <li><a href="">Raost</a></li>
            </ul>
        </li>
        <li class="cat">
            <a href="">Chicken</a>
            <ul>
                <li><a href="">Breast</a></li>
                <li><a href="">Drumstick</a></li>
                <li><a href="">Wing</a></li>
            </ul>
        </li>
        <li class="cat">
            <a href="">Fish</a>
            <ul>
                <li><a href="">Salmon</a></li>
            </ul>
        </li>
    </ul>
</nav>

HTH.

answered Apr 5, 2012 at 23:03

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

1 Comment

Vince Over a year ago

Thanks Tiesen, what I really need is a way of giving each Main category a different colour, hence the need for nth-child selectors. what You kindly gave me was a solution for getting all the Main Cats the same colour.

mr.b · Accepted Answer · 2012-04-05 23:28:21Z

0

So on my own observation "nth-child" will work if the element is direct child. Please refer to here http://jsfiddle.net/fuPJs/

If you notice in the code, these lines:

<li class="cat">
        <a href="">Beef</a>
        <a href="">Steak</a>
        <a href="">Raost</a></li>
    </li>

they are a direct child of class="cat" so your css selector works for "nth-child". The rest of them are not direct child that's why it did not work.

Hope that helps.

Best,

answered Apr 5, 2012 at 23:28

mr.b

2,7188 gold badges40 silver badges65 bronze badges

1 Comment

Vince Over a year ago

Thanks so much shen but sadly your efforts did not work. Your css does not isolate the Main Categories by the class. Your N-child selector does give different colours but simply to the next li which could be a sub category.

Collectives™ on Stack Overflow

Trying to use CSS class Together with Nth- child selector

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related