0

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;
}
Zabs
  • 13,852
  • 45
  • 173
  • 297

3 Answers3

3

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

.facebook.interaction-container:not(:first-of-type)::before {
    ...    
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Also check this: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – Marcel Schmid Feb 06 '17 at 13:35
  • yes, yes, indeed `:first-of-type` is tied to the element, regardless of the class, as explained in several answers on SO, but in this context that class is the only information available I know to target the element. – Fabrizio Calderan Feb 06 '17 at 13:41
  • 1
    yeah ofc. It was just meant as addition. Author didn´t give too much information actually – Marcel Schmid Feb 06 '17 at 13:45
0

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/

JasperZelf
  • 2,731
  • 1
  • 22
  • 34
0

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>
seantunwin
  • 1,698
  • 15
  • 15