Come targeting specifici elementi CSS?

Supporto
1

Voglio selezionare un elemento specifico per modificarne le proprietà (ad esempio):

.d-button-label { display: none !important;}

Ma poi ho realizzato che viene utilizzato ovunque in Discourse, non solo nell’elemento del plugin che stavo cercando di personalizzare. Come potrei quindi selezionare quell’etichetta specifica?

Screen Shot 2020-04-06 at 10.35.15 PM copy
Screen Shot 2020-04-06 at 10.35.15 PM copy542×283 39.6 KB

Screen Shot 2020-04-07 at 12.22.13 AM
Screen Shot 2020-04-07 at 12.22.13 AM1257×306 70.5 KB

2

Salite nell’albero HTML e individuate un genitore con una classe univoca.

Potete quindi aggiungere il genitore al selettore in questo modo

.parent-class .child-class {
  display: none;
}

Potete anche aggiungere più classi genitore univoche, ad esempio

.grandparent-class .parent-class .child-class {
  display: none;
}

Se necessario.

La stessa cosa in SCSS apparirebbe così

.grandparent-class {
  .parent-class {
    .child-class {
      display: none;
    }
  }
}

Questo dovrebbe eliminare la necessità di utilizzare !important

3

Grazie @Johani! Mi hai appena insegnato qualcosa di nuovo che mi tornerà molto utile!