1

is there any way using a combination of pseudo classes like :nth-of-type to style elements (eg. div) that are an nth occurence of this class in entire document? What I mean is not necessarily use this pseudo calss, but any method to target a specific occurence of a css class in entire website and not in the same parent. Here is my code, which obviously doesn't work this way:

    <html>
    <head>
    <style>
       .a1:nth-of-type(1) div:nth-of-type(2) {background: red;}
       .a1:nth-of-type(n+3) div:nth-of-type(2) {background: yellow;}
    </style>
    </head>
    <body>
    <div>

    <div>
     <div class="a1">
      <div class="b1"><p>The first paragraph.</p></div>
      <div class="b1"><p>The second paragraph.</p></div>
      <div class="b1"><p>The third paragraph.</p></div>
      <div class="b1"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b2"><p>The first paragraph.</p></div>
      <div class="b2"><p>The second paragraph.</p></div>
      <div class="b2"><p>The third paragraph.</p></div>
      <div class="b2"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b3"><p>The first paragraph.</p></div>
      <div class="b3"><p>The second paragraph.</p></div>
      <div class="b3"><p>The third paragraph.</p></div>
      <div class="b3"><p>The fourth paragraph.</p></div>
     </div>
    </div>
    <br>

    <div>
     <div class="a1">
      <div class="b4"><p>The first paragraph.</p></div>
      <div class="b4"><p>The second paragraph.</p></div>
      <div class="b4"><p>The third paragraph.</p></div>
      <div class="b4"><p>The fourth paragraph.</p></div>
     </div>
    </div>

    </div>
    </body>
    </html>

Here is the pen: http://codepen.io/kriana/pen/mOPrLd

Thanks!

Chris Osiak
  • 151
  • 1
  • 11

1 Answers1

0

Your intention to use n+3 is not clear. Check this out:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

Some examples:

1n+0, or simply n, would match every child element. n does not match on Android Browser 4.3 and below whereas 1n does. 1n does the same thing as 1n+0. Feel free to use whichever looks better. 2n+0, or simply 2n, would match child elements 2, 4, 6, 8, etc. You can substitute the keyword even for this expression. 2n+1 would match child elements 1, 3, 5, 7, etc. You can substitute the keyword odd for this expression. 3n+4 would match child elements 4, 7, 10, 13, etc. The values a and b must both be integers, and the index of an element's first child is 1. In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, ... }.

REF - :nth-child on MDN

:nth-child and :nth-of-type have the same syntax.

UPDATE:

The problem with your code is that :nth-of-type matches sibling elements. Those .a1 divs are not sibling elements, so each one is treated as the first occurrence.

Huang Tao
  • 2,254
  • 2
  • 26
  • 31
  • What is unclear about "nth occurence in entire document"? – BoltClock Nov 12 '16 at 15:32
  • @BoltClock a combination of `1` and `n+3` means `1,3,4,5,6,...`, not sure if this is the OP's intention. – Huang Tao Nov 12 '16 at 15:38
  • I know this will not work and the pseudo elements I've mentioned will target only the sibling elements of same parent. My question is whether it's possible in any way to somehow "ovverride" this issue and somehow (not necessarily with the nth-of-type) target specific occurences of a certain css class. For example: first occurence mark red, third mark green, sixth mark grey. This relates to the complete document, not only one parent div. – Chris Osiak Nov 12 '16 at 22:11
  • @ChrisOsiak you can't do that with CSS selectors. Javascript is needed to achieve that. – Huang Tao Nov 13 '16 at 01:23