Javascript Solution pour nettoyer CSS

Question

Je travaille sur l'ajout d'un peu de CSS à un site que je fais, et ont identifié ce que je dois modifier:

#MSOZoneCell_WebPartWPQ1{ 
background-color: #FFF !important; 
outline: 4px solid white; 
} 
#MSOZoneCell_WebPartWPQ2{ 
background-color: #FFF !important; 
outline: 4px solid white; 
} 
#MSOZoneCell_WebPartWPQ3{ 
background-color: #FFF !important; 
outline: 4px solid white; 
} 

.....

#MSOZoneCell_WebPartWPQ20{ 
background-color: #FFF !important; 
outline: 4px solid white; 
} 

Je ne peux pas remplacer les conteneurs plus génériques de niveau supérieur afin qu'il ne nécessite pas les numéros différents. Y a-t-il une solution JS ou autre à mon problème? Je n'ai pas la possibilité d'éditer le HTML, seulement le CSS.

Je n'ai pas vu une question similaire mais je peux juste utiliser les mauvais termes.

Answer 1

La meilleure solution utiliser une classe ou d'un sélecteur qui cible l'élément sans utiliser l'identifiant, mais vous pouvez utiliser un attribut commence par selector

[id^="foo"] { 
 
    background-color: green; 
 
    margin: .2rem; 
 
}

<div id="foo1">foo1</div> 
 
<div id="foo2">foo2</div> 
 
<div id="foo3">foo3</div> 
 
<div id="foo4">foo4</div> 
 
<div id="5foo">5foo</div> 
 
<div id="6foo6">6foo6</div>