0

I have the next code:

<div id="mainContainer">
  <ul>
    <li class="mainclass class1-1"> </li>
    <li class="mainclass class1-1"></li>
    <li class="mainclass active"></li>
    <li class="mainclass class1-2"></li>
    <li class="mainclass class1-2"></li>
  </ul>
</div>

I tried to select the second type with class1-2 with the next lines but nothing happen:

#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}

#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class~="class1-2"]:nth-of-type(2){right:1.7em;}

#mainContainer li[class*="-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class*="-2"]:nth-of-type(2){right:1.7em;}

.mainclass.class1-2:nth-of-type(2){right:1.7em;}

Exist some css selector especify for this case?

josue
  • 1
  • 1

1 Answers1

1

I don't believe you can target the element on its own but if you only have the 2 elements with .class1-2 then you can use the following:

.mainclass.class1-2 + .mainclass.class1-2 {
    right:1.7em;
}

Keep in mind this will affect additional elements that come directly after it with the same class.

Ric
  • 35
  • 7
  • yes, I thought in this too, but it will be more elements, and each one needs to go to right .3em more, like a stack of magazines. :( – josue Aug 25 '17 at 14:07
  • for example, now, the first image hide the second, I need to show the second too, but a little to right, something like this https://ibb.co/eHiOMk – josue Aug 25 '17 at 14:12
  • How many magazines are you going to have? You could always append another `+ .mainclass.class1-2` but it starts getting pretty ugly – Ric Aug 25 '17 at 14:17
  • 15 magazines, and the main idea is a slider – josue Aug 25 '17 at 14:31