using regex for CSS class definition

Question

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

And what is supposed to change in each class? Why do not use a global class and ids for each of the elements? — Francisco Romero
– Francisco Romero, Commented Jun 1, 2016 at 13:22
excellent question, and one that I've asked the original page developer about. From what I can tell, those 2-digit ID's are somewhat extraneous but I can't be sure there's no relevance at all until I hear back from him. — dsbalaban
– dsbalaban, Commented Jun 1, 2016 at 13:38
Maybe you can set an ID more intuitive. For example: box01. Anyway, you will need to use message-box01 to change the styles for this element specifically so I do not think there is a lot of problems to add an ID. — Francisco Romero
– Francisco Romero, Commented Jun 1, 2016 at 13:44

Seimen · Accepted Answer · 2016-06-01 13:30:35Z

6

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.

edited Jun 1, 2016 at 13:30

Seimen

7,2942 gold badges30 silver badges42 bronze badges

answered Jun 1, 2016 at 13:22

Gaurav Aggarwal

10.2k8 gold badges42 silver badges76 bronze badges

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

2 Comments

dsbalaban Over a year ago

brilliant, i've just found tis as well. Would something like this work? [id^='messages-box'] ul li { list-style-type: none; float: left; }

o12d10 Over a year ago

Is there a way to extract that number from css class name, padding-10 which will add padding of 10px, rather then writing multiple padding classes.

Collectives™ on Stack Overflow

using regex for CSS class definition

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related