CSS: Combining static html class with dynamic class that uses attribute selector

Question

Html :

<div class="main main-280">

"main-280" is dynamically generated and may change so css for that selector alone would be:

div[class^="main-"]{-------}

But how do I target both classes as in .main.main-280 using an attribute selector? It seems like this wouldn't work:

.main.div[class^="main-"]{-------}

Hi Matt, I put up an answer which suggested using these two selector combinations: div[class~="main"][class*=" main-"], div[class~="main"][class^="main-"] It seemed to work for me but the answer has been downvoted so I've removed it. I'd be interested in you trying out those two and tell me whether it helps or not as I can't see what's wrong with it. Thanks. — A Haworth
– A Haworth, Commented Sep 2, 2022 at 18:32

lukaasz555 · Accepted Answer · 2022-09-02 17:02:00Z

2

Not sure I know what you exactly mean, but:

const main = document.querySelector('.main');

document.querySelector('button').addEventListener('click',  () => main.classList.toggle('main-280'));

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
}

div[class^="main"][att="alwaysVisible"] {
  height: 150px;
  width: 150px;
  background-color: royalblue;
  border-radius: 8px;
}

.main.main-280 {
  box-shadow: 4px 8px 20px rgba(0,0,0,.5);
}

<div class="main main-280" att="alwaysVisible"></div>
<button>toggle class main-280</button>

answered Sep 2, 2022 at 17:02

lukaasz555

17410 bronze badges

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

1 Comment

Rohit Gupta Over a year ago

I have upvoted it as I think that it answers the question (as it can be understood)

Collectives™ on Stack Overflow

CSS: Combining static html class with dynamic class that uses attribute selector

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related