CSS - select all elements that has class starting with prefix

Question

Need to target each element that has specific class starting with depth-

I tried targeting with CSS:

[class^="depth-"] {
    margin-left: 40px;
}

but it works only when targeted class is the first in classes order.

In my case:

<div class="comment byuser comment-author-admin odd alt depth-2 parent" id="comment-13">
    <div id="div-comment-13" class="media">
        ...
    </div>

    <div class="comment byuser comment-author-admin even depth-3" id="comment-14">
        <div id="div-comment-14" class="media">
            ...
        </div>
    </div>
</div>

Can't you add a custom additional class manually to the elements you want and apply the properties in CSS? — Praneet Dixit, Dec 03 '20 at 14:20
Your only other real option is `[class*="depth-"]`. It's not a precise since "depth" can appear *anywhere* rather than starting the class name. — Paulie_D, Dec 03 '20 at 14:22
https://stackoverflow.com/questions/41928892/javascript-selector-by-class-prefix — s.kuznetsov, Dec 03 '20 at 14:38
Leaving a space before -depth might help `div[class*=' depth-'],div[class^='depth-'] { }` — John Fotios, Dec 03 '20 at 15:01

score 4 · Accepted Answer · answered Dec 03 '20 at 14:34

The CSS [attribute^="value"] Selector will only work when the entire style attribute value starts with given value. If you want to use this selector, then you will have to move the depth-2 and depth-3 classes at the beginning of the attribute as below -

<div class="depth-2 comment byuser comment-author-admin odd alt parent" id="comment-13">
    <div id="div-comment-13" class="media">
        TXT HERE
    </div>

    <div class="depth-3 comment byuser comment-author-admin even" id="comment-14">
        <div id="div-comment-14" class="media">
            MORE HERE
        </div>
    </div>
</div>

It would not be a good idea to do this. Instead of this, you can use CSS [attribute*="value"] Selector which searches for given value throughout the attribute. So, your css code will look like this without changing the html -

div[class*="depth-"]{
    margin-left: 40px;
}

CSS - select all elements that has class starting with prefix

1 Answers1