CODEWITHSUNDEEP
css
dsbalaban
dsbalaban

Reputation: 43

using regex for CSS class definition

I have a block of html something like this:

<div class="message-box01">...</div>
<div class="message-box02">...</div>
<div class="message-box03">...</div>

The 2-digit number appended to 'message-box' is breaking my css because the definition is like so:

.message-box ul li {
  background: #fff;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  font-size: 25px;
  text-align: center;
  padding-top: 15%;
  transition: all 0.2s ease-in-out;
}

So I'm wondering if there's a way to use a regex in the class definition, similar, I suppose, to what I'm seeing here: another css related page

to use pseudo-code:

.message-box[\d*] {
    ...
}

Or something like that.

Alternatively, is something like this possible:

[id^='messages-box'] ul li {
    list-style-type: none;
    float: left;
}

Upvotes: 0

Views: 4560

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10197

If you have multiple classes with the same word you can use this 

div[class^='message-box']{
  ...
}

The above code applies to every div whose class starts with message-box.

Upvotes: 6

Related Questions