Javascript Solution to clean up CSS

Question

I am working on adding some CSS to a site I am making, and have identified what I need to modify:

#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;
}

I can't override the upper level more generic containers so that it doesn't require the different numbers. Is there a JS or other solution to my problem? I don't have the ability to edit the HTML, only the CSS.

I didn't see a similar question but I may just be using the wrong terms.

Well normally one would use a class. Without seeing HTML hard to give you solutions that do not rely on ID. — epascarello
– epascarello, Commented Jul 28, 2017 at 14:08
@epascarello updating OP but I lack the ability to edit the HTML on the page. — Packerfan504
– Packerfan504, Commented Jul 28, 2017 at 14:11

epascarello · Accepted Answer · 2017-07-28 14:20:13Z

2

Best solution use a class or a selector that targets the element without using the id, but you can use an attribute starts with 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>

edited Jul 28, 2017 at 14:20

answered Jul 28, 2017 at 14:10

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Packerfan504 Over a year ago

To clarify, [id^="foo"] will allow cause an edit on any id that starts with "foo" to receive that edit?

epascarello Over a year ago

any id that starts with foo gets those css rules.

Collectives™ on Stack Overflow

Javascript Solution to clean up CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related