Define CSS selector with pattern

Question

I have following elements:

<div class="grid">
   <div class="col-1">First Col</div>
   <div class="col-center-2">Second Col</div>
   <div class="col-center-3">third Col</div>
   <div class="col-3">third Col</div>
</div>

i want to add class for all elements which have "-center-" word on that. how i can define this selector?

You might find this article about attribute selectors handy: css-tricks.com/attribute-selectors — haltersweb
– haltersweb, Commented May 17, 2016 at 2:57

Nenad Vracar · Accepted Answer · 2016-05-16 13:01:27Z

6

You can use [attr*=value] attribute selector

div[class*="-center-"] {
  color: red;
}

<div class="grid">
  <div class="col-1">First Col</div>
  <div class="col-center-2">Second Col</div>
  <div class="col-center-3">third Col</div>
  <div class="col-3">third Col</div>
</div>

answered May 16, 2016 at 13:01

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

Collectives™ on Stack Overflow

Define CSS selector with pattern

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related