0

I want to have a elements where one is highlighted and other colors just move one div right . here's code :

<div class="all">
    <div class="normal"></div>
    <div class="normal"></div>
    <div class="normal"></div>
    <div class="highlighted"></div>
</div>

<div class="all">
    <div class="normal"></div>
    <div class="highlighted"></div>
    <div class="normal"></div>
    <div class="normal"></div>
</div>



.all > div { 
    width: 100px; 
    display: inline-block;
    height: 100px;
}
.normal:nth-of-type(1) { background: red; } 
.normal:nth-of-type(2) { background: blue; }
.normal:nth-of-type(3) { background: green; }
.highlighted { background: yellow; }

http://jsfiddle.net/6dn9ovvc/1/

In second line I need to have red , yellow , blue , green.

Harry
  • 87,580
  • 25
  • 202
  • 214
mateusz-c
  • 110
  • 3
  • 14
  • There is no `nth-of-class` which is what you seem to be trying to achieve. – Paulie_D Feb 05 '15 at 11:19
  • It is a bit unclear (atleast for me). What exactly do you mean by *one is highlighted and other colors just move one div right*? Also will the parent always have only 4 divs in it? – Harry Feb 05 '15 at 11:23
  • i want to have highlighted class which be in different places , so i want to achieve that when highlighted is the class of second div , then first div is colored normal , the second div is highlighted the third is in color of second normal div , the fourth div is in color of third normal div. – mateusz-c Feb 05 '15 at 11:28
  • 3
    I think [this](http://jsfiddle.net/6dn9ovvc/2/) is what you mean mate. This doesn't use the `nth-of-type` (because as others have mentioned this is not possible with it). – Harry Feb 05 '15 at 11:30
  • Glad to know it helped mate. Actually this option itself I read somewhere on SO only earlier (think it was BoltClock's answer) :) – Harry Feb 05 '15 at 11:33
  • 1
    Based on OP's comment http://stackoverflow.com/questions/25094913/hide-the-first-div-with-specific-class/25094973#25094973 and http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class seem to be closer to this question. Though the question currently used to mark as dupe is not incorrect, I feel these two are closer. – Harry Feb 05 '15 at 11:43

0 Answers0