CODEWITHSUNDEEP
csssasscss-selectors
webmaster pf
webmaster pf

Reputation: 399

Exclude child from styling with :not

I try to apply style for a part of a content with this HTML markup:

<li class="views-row views-row-9 views-row-odd tid-106
">  
<span><a href="/fiche/bac-pro-csr">BAC Pro Commercialisation et services en restauration - CSR</a>
<br><span class="complement">
 Bac Pro CSR avec Restaurant d'application (Section Européenne)
  </span><br> 
Section Européenne 
</span>
  </li>

I want ton only style "Section Européenne" text, and exclude content from span.complement, so I try this that isn't work in sass:

 li{
                  &:not(img):not(a):not(.complement){
                        font-weight: bold;
                        /*-webkit-text-stroke:em(1px) $gris-anthracite;//Contour de texte*/
                    }
                    &:matches(.complement){
                        font-weight: initial;
                    }}

Is it possible to do this ? Is it possible to exclude the span child of the span via :not ?

Something like this ?

              &:not(img):not(a):not(>span.complement){}

thanks

Upvotes: 0

Views: 84

Answers (1)

Temani Afif
Temani Afif

Reputation: 272947

You need to do something like this since the span is inside the other span:

li span {
  font-weight:bold;
}
li span.complement {
  font-weight:initial; /*we revert back the inherited style*/
}
<li class="views-row views-row-9 views-row-odd tid-106">
  <span><a href="/fiche/bac-pro-csr">BAC Pro Commercialisation et services en restauration - CSR</a>
<br>
<span class="complement">
 Bac Pro CSR avec Restaurant d'application (Section Européenne)
 </span>
 <br> Section Européenne
  </span>
</li>

Upvotes: 1

Related Questions