nth-of-type and nth-child in css not working properply

Question

I want apply green color for the first nth child flag

<div id="axis">
     <div class="super"></div>
     <div class="flag">flag 1</div><!-- I want this text to be green-->
     <div class="super"></div>
     <div class="flag">flag 2</div>
     <div class="super"></div>
     <div class="flag">flag3</div>
     <div class="super"></div>
</div>

Css:

#axis{
    color:red;
}

#axis .flag:nth-of-type(1){
    color:green;  
}

#axis .flag:nth-child(1){
    color:green;
}

I tried in both scenario but not working...

Fiddle

`nt-child` and `nt-of-type` doesn't select according to class or ID. — web-tiki, Sep 18 '14 at 09:14
Fiddle - http://jsfiddle.net/4pnh246q/2/ or http://jsfiddle.net/4pnh246q/3/ — Anonymous, Sep 18 '14 at 09:14
@web-tiki - I understood then what is the solution for my answer — Sudharsan S, Sep 18 '14 at 09:16
`nth-of-type` works with only element selector.. it won't search for class — Arun P Johny, Sep 18 '14 at 09:17
Since you have tagged jQuery, you could achieve that by [`:first` selector](http://api.jquery.com/first-selector/): `$("#axis").find(".flag:first");` — Hashem Qolami, Sep 18 '14 at 09:18
What about `#axis .flag:nth-of-type(2)`? http://jsfiddle.net/4pnh246q/4/ — Manwal, Sep 18 '14 at 09:20
If it's not about jQuery or you're not interested in a jQuery answer, don't tag it jQuery. Period. — BoltClock, Sep 18 '14 at 10:30
@BradLarson - My timed suspension ends. But my reputation not recalculated again why. Please I want to continue in stackoverflow. Please check and do needful and kindly give me a reputation again. — Sudharsan S, Jul 21 '15 at 15:45

score 0 · Answer 1 · edited Sep 18 '14 at 09:30

0

Another way to acheive this is

<div id="axis">
    <div class="super"></div>
    <div class="flag">flag 1</div><!-- I want this text to be green-->
    <div class="super"></div>
    <div class="flag">flag 2</div>
    <div class="super"></div>
    <div class="flag">flag3</div>
    <div class="super"></div>
</div>

In CSS it will be

#axis > div:nth-child(2) {
    color: green;
}

Another way:

Apply a common CSS:

.flag {
   /* first .flag element styles here */
   /* though these styles are applied to all .flag elements, in later step they get overridden. */
}

.flag + .flag{
    /* override above styles */
    /* Applies css to all the .flag elements except the first one */
}

edited Sep 18 '14 at 09:30

Mr_Green

40,727
45
159
271

answered Sep 18 '14 at 09:18

Abhijeet yadav

90
9

your answer is static. Suppose nth-child(2) class is super means it also apply green it not the scenario – Sudharsan S Sep 18 '14 at 09:22
@JqueryKing Since, this post was closed.. I added my answer as "Another way" in this post. Abhijeet, I hope you are not offended. – Mr_Green Sep 18 '14 at 09:25
@Mr_Green Not at all, I learned something so why should I be offended. – Abhijeet yadav Sep 18 '14 at 09:29
@Mr_Green - However, your way doesn't work. You want the general sibling combinator `~`, not the adjacent sibling combinator `+`. – Alohci Sep 18 '14 at 09:55
@Alohci both works same. because I am not using `:first-child` or and other specific pseudo class here. – Mr_Green Sep 18 '14 at 09:56

score 0 · Accepted Answer · answered Sep 18 '14 at 09:29

0

Another way DEMO

<ul id="axis">
    <li class="flag">flag 1</li>
    <li class="flag">flag 2</li>
    <li class="flag">flag3</li>
</ul>

.flag {
    list-style:none;
    color:red;
}


.flag:nth-of-type(1) {

    color:green;  
}

answered Sep 18 '14 at 09:29

Alex Wilson

2,421
11
13

nth-of-type and nth-child in css not working properply

2 Answers2

Another way: