CODEWITHSUNDEEP
csscss-selectorspseudo-elementpseudo-class
Galivan
Galivan

Reputation: 5338

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

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;
    }

Upvotes: 0

Views: 1510

Answers (2)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

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;
}

Upvotes: 0

BoltClock
BoltClock

Reputation: 723749

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?

Upvotes: 2

Related Questions