Is There a CSS Selector by Class Prefix

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 output class 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



Leave a reply



Submit