How to apply a rule to all classes starting with a specific word?

Question

I want to apply:

.page-item-124 a {
  font-size: 15px !important;
  font-weight: bold;
}

to all page items (classes starting with page-item) there are.

How can I do that?

`font-size` is inherit property. so apply only to `body` tag. and no need of `!important`. — Mr_Green, Nov 26 '15 at 10:53
OP said: `to all page items`. I hope he meant to all elements in that page. — Mr_Green, Nov 26 '15 at 10:56
As the class name is `page-item-xxx` I assumed he meant the elements with class `page-item-[something]` ;) btw; we can't know if `!important` is needed. Probably he's overwriting template styles. — giorgio, Nov 26 '15 at 11:02
Possible duplicate of [Is there a CSS selector by class prefix?](http://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix) — Thaillie, Nov 26 '15 at 12:46

score 2 · Accepted Answer · answered Nov 26 '15 at 10:58

2

You can use CSS3 [attribute*=value] Selector like this

HTML

<div class="page-item-1">Lorem ipsum</div>
<div class="page-item-2">Lorem ipsum</div>

CSS

div[class*="page-item"] {
  color: blue;
  font-size: 15px;
}

answered Nov 26 '15 at 10:58

Nenad Vracar

You're welcome. Since you're new here, please don't forget to mark the answer accepted which helped most in solving the problem. See also How does accepting an answer work? – Nenad Vracar Nov 26 '15 at 11:06
If you want to use same class on other html element for example `a` your css selector should be like this `a[class*="page-item"]` but since you are using `div` you can use this selector `div[class*="page-item"]` – Nenad Vracar Nov 26 '15 at 11:12

score 0 · Answer 2 · answered Nov 26 '15 at 11:00

You can use the starts with (^=) or wildcard (*=) attribute selector for that:

[class=^page-item] { font-size: 15px !important; font-weight: bold; }

This will select among others these elements:

<p class="page-item-123"></p>
<section class="page-item-intro"></section>

You might want to narrow it down a bit. Eg only select div elements.

div[class^=page-item] { ... }

2 Answers2