Is there a CSS selector by class prefix?
It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):
div[class^="status-"], div[class*=" status-"]
Notice the space character in the second attribute selector. This picks up div
elements whose class
attribute meets either of these conditions:
[class^="status-"]
— starts with "status-"[class*=" status-"]
— contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that outputclass
attributes dynamically).
Naturally, this also works in jQuery, as demonstrated here.
The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"]
will match the following element, which may be undesirable:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.
If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status-
prefix its own status
class instead as Gumbo suggests.
CSS - select all elements that has class starting with prefix
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 class that is not with a prefix
Attribute selector is what you are looking for. Especially [attr^=value]
:
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
This should work:
a:not([class^="text-"]) { color: orange;}
<a class="text-a">a</a><a class="b">b</a>
How to define css selector class prefix with SASS
You can use the following construct:
[class^="name"]{
&[class$="-1"]{
padding: 10px;
}
}
For reference check out the W3C Selectors section.
EDIT
CSS Version on JSFiddle
As Beterraba mentioned this will also match .nameother-1
. To avoid this use the following:
[class|="name"]{
&[class$="-1"]{
padding: 10px;
}
}
If you e.g. want to match .name-1-2
you could do the following:
[class|="name"]{
color: red;
&[class*="-1"]{
padding: 10px;
color: green;
&[class$="-2"]{
padding: 30px;
color: yellow;
}
}
}
But this would also match .name-15-2
. To avoid that you need to make something like this:
[class|="name"]{
color: red;
&[class$="-1"]{
padding: 10px;
color: green;
}
&[class$="-1-2"]{
padding: 30px;
color: yellow;
}
}
But this would also match name-5-1-2
. And so on.. I think the list is endless.
Anyway it's getting very unreadable. I don't recommend you to do so. Why not simply targeting these elements directly?
Why is index_ prefix added to class and id selectors in webpack imported CSS
After reading the docs of css-loader, it is clear this behavior is created by passing modules: true
as an option to css-loader
in the webpack configuration. This behavior can be overridden by using:global(selector)
notation with all class and id selectors.
From the docs:
With :local (without brackets) local mode can be switched on for this
selector. :global(.className) can be used to declare an explicit
global selector. With :global (without brackets) global mode can be
switched on for this selector.
CSS selector for all elements beginning with app- prefix
As far I know there 's no solution in css
but in sass
you can use list to store your components name and loop throw the list and create the desire selector.
but with this way you have to add the components name manually
$component-list : 'home','admin' , 'other';
$prefix : 'app';
@each $c in $component-list {
#{$prefix}-#{$c}{
color:red;
}
}
stackblitz demo
Related Topics
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
Align Child Elements of Different Blocks
Complex CSS Selector For Parent of Active Child
Is There a CSS Selector by Class Prefix
Why Isn't It Possible to Combine Vendor-Specific Pseudo-Elements/Classes into One Rule Set
Why Do the :Before and :After Pseudo-Elements Require a 'Content' Property
Is the CSS Star Selector Considered Harmful (And Why)
Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]
Black Transparent Overlay on Image Hover With Only Css
Font Awesome Not Working, Icons Showing as Squares
Prevent Content from Expanding Grid Items
Css Scoped Custom Property Ignored When Used to Calculate Variable in Outer Scope
How to Select an Element Based on the State of Another Element in the Page With Css
How to Change the Cursor into a Hand When a User Hovers Over a List Item