Create pseudo elements, but exclude specific elements (with not:nth-child)

Question

I want to set a pseudo element border on some containers, but exclude the third one. I thought I could combine the pseudo selector with :not , like: div:before:not(nth-child(3)), but it doesn't seem to work.

So is the :not selector incompatible with pseudo selectors? In that case, how can I make it work putting pseudo elements and exclude some specific elements?

(By the way, the idea with pseudo element borders is to control the borders so that they stay on top regardless if there are any overlays on top (haven't seen if it works though)

Here is a fiddle: (there are no visible borders because of the not:(nth-child(3)) selector)

Fiddle

Here is the code from the fiddle:

HTML:

<div class="ctr">
  <div>
      <div></div>
    <div></div>
    <div></div>
    </div>
  <div>
     <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

.ctr > div div{
  float:left;
  width:100px;
  height:100px;
  background:black;
  /*border:green 3px solid; */
}
.ctr > div:after{
  content:"";
  display:block;
  clear:both;
}
.ctr > div div{
  position:relative;
}

/* only if I remove ":not(:nth-child(3))" , the pseudo selector will appear: */

.ctr > div div:before:not(:nth-child(3)){   
       content: "";
      display: block;
      z-index: 2;  
      position: absolute;
      left:0;
      right:0;
      bottom:0;
       top:0;
       height: 100%;
       width: 100%;
      border-right: 0.35em red solid;
      border-bottom: 0.35em red solid;
    }

score 2 · Accepted Answer · answered Jul 18 '17 at 10:25

Are you trying to create a ::before pseudo-element for all but the third child?

If so, the :not() pseudo-class needs to come first, since pseudo-elements can only appear at the very end of a selector (and this is why the made-up term "pseudo-selector" is dangerous to use, because you can't group pseudo-classes and pseudo-elements into a single umbrella term given their syntactic differences):

.ctr > div div:not(:nth-child(3))::before

Since you're using CSS3 pseudo-classes anyway, pseudo-elements should be indicated with double colons to further cement the difference between the two.

See also: How to write :hover condition for a:before and a:after?

Yes it worked (I think i've tried it before, but must have made some mistake which made it not work). Thanks for reminding about the double colons. — Galivan, Jul 18 '17 at 12:03

score 0 · Answer 2 · answered Jul 18 '17 at 10:36

0

I hope this will work for you

.ctr > div div:nth-child(3).before{
    /*remove properties you don't need on third element*/
}

or you can even hide the pseudo element like below

.ctr > div div:nth-child(3).before{
    display: none;
}

answered Jul 18 '17 at 10:36

Pons Purushothaman

2,225
1
14
23

Create pseudo elements, but exclude specific elements (with not:nth-child)

2 Answers2