CODEWITHSUNDEEP
htmlcsscss-selectors
Zabs
Zabs

Reputation: 14142

CSS selector to add 'before' content where it is NOT the first selector

I am trying to amend some CSS which basically will only run when it IS NOT the first of its type using CSS - the following works but is showing for all selectors? 

.networks-body.all .facebook.interaction-container::before
{
  content: "\f09a";
  margin-right: 2px;
}

Upvotes: 0

Views: 71

Answers (3)

seantunwin
seantunwin

Reputation: 1778

You could use nth-of-type(1n+1) here while still including ::before at the end.

Inside the brackets, 1n, means to select every instance, while +2 means to start at the second instance. In other words, select all instances except the first.

.facebook.interaction-container:nth-of-type(1n+2)::before {
  content: "\f09a";
  margin-right: 2px;
}

Example: 

li:nth-of-type(1n+2)::before {
  content: 'A';
  color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Upvotes: 0

JasperZelf
JasperZelf

Reputation: 2844

Edit: fcalderan's answer is cleaner ;)

You can add the prepend to ALL the element, and than remove it from the first of type:

.networks-body.all .facebook.interaction-container::before{
    content: "\f09a";
    margin-right: 2px;
}

.networks-body.all .facebook.interaction-container:first-of-type::before{
   content: none;
}

Example: https://jsfiddle.net/mfge1or3/

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

try to chain :not(:first-of-type) before the pseudoclass ::before

.facebook.interaction-container:not(:first-of-type)::before {
    ...    
}

Upvotes: 3

Related Questions