1

So I'm coming to terms to nth-of-type() ignoring class, for instance in the following:

HTML:

<body style="">
<h1>Title</h1>
<div class="container"> things </div>
<div class="alert">alert 1</div>
<div class="alert">alert 2</div>
</body>

CSS:

body > div.alert:nth-of-type(1) { border-color: blue; }
body > div.alert:nth-of-type(2) { border-color: green; }
body > div.alert:nth-of-type(3) { border-color: red; }

I would expect to have alert 1/alert 2 as blue/green, however instead they are green/red.

Is there a way to achieve my goals with CSS? These alerts are created by a third-party plugin where I believe I lack simple control over both their placement in the DOM, or giving them unique CSS classes, so I'm hoping that pseudo-classes can work here without HTML modification?

My JSFiddle: https://jsfiddle.net/1jm94rye/1/

DanH
  • 5,498
  • 4
  • 49
  • 72
  • 1
    Can you explain why you would expect nth-of-type to be influenced by the class? A type is not a class. – Mr Lister Sep 25 '16 at 12:51
  • I'm not expecting to use `nth-of-type`, I'm just trying to achieve my goal and `nth-of-type` seemed to be the best bet but obviously not – DanH Sep 25 '16 at 16:06

0 Answers0