CSS Class name containing any number
I'm using a css selector to be able to target all classes that start with pl-0, pl-1, pl-2, pl3, ... [class^="pl-"] how ever i get a conflict with some other classes of a third part integration who use elements with a class name pl-header :/
is there a way to use something like [class^="pl-[0-9]"] ?? if not, how can I apply this class [class^="pl-"] except when it's the child of specific div name?
Thanks a lot
css css-selectors
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
add a comment |
I'm using a css selector to be able to target all classes that start with pl-0, pl-1, pl-2, pl3, ... [class^="pl-"] how ever i get a conflict with some other classes of a third part integration who use elements with a class name pl-header :/
is there a way to use something like [class^="pl-[0-9]"] ?? if not, how can I apply this class [class^="pl-"] except when it's the child of specific div name?
Thanks a lot
css css-selectors
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
div:not(.foo) [class^="pl-"]should work for applying it unless it's a child of .foo
– rlemon
Nov 22 '18 at 19:35
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
i tried your solution but it doesn't work. using a class.pl-headerwhich is a child ofdiv.foois still applied :/
– Websphere
Nov 23 '18 at 20:32
seems to work for me
– rlemon
Nov 23 '18 at 20:54
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13
add a comment |
I'm using a css selector to be able to target all classes that start with pl-0, pl-1, pl-2, pl3, ... [class^="pl-"] how ever i get a conflict with some other classes of a third part integration who use elements with a class name pl-header :/
is there a way to use something like [class^="pl-[0-9]"] ?? if not, how can I apply this class [class^="pl-"] except when it's the child of specific div name?
Thanks a lot
css css-selectors
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
I'm using a css selector to be able to target all classes that start with pl-0, pl-1, pl-2, pl3, ... [class^="pl-"] how ever i get a conflict with some other classes of a third part integration who use elements with a class name pl-header :/
is there a way to use something like [class^="pl-[0-9]"] ?? if not, how can I apply this class [class^="pl-"] except when it's the child of specific div name?
Thanks a lot
css css-selectors
css css-selectors
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
asked Nov 22 '18 at 19:32
WebsphereWebsphere
18113
18113
div:not(.foo) [class^="pl-"]should work for applying it unless it's a child of .foo
– rlemon
Nov 22 '18 at 19:35
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
i tried your solution but it doesn't work. using a class.pl-headerwhich is a child ofdiv.foois still applied :/
– Websphere
Nov 23 '18 at 20:32
seems to work for me
– rlemon
Nov 23 '18 at 20:54
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13
add a comment |
div:not(.foo) [class^="pl-"]should work for applying it unless it's a child of .foo
– rlemon
Nov 22 '18 at 19:35
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
i tried your solution but it doesn't work. using a class.pl-headerwhich is a child ofdiv.foois still applied :/
– Websphere
Nov 23 '18 at 20:32
seems to work for me
– rlemon
Nov 23 '18 at 20:54
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13
div:not(.foo) [class^="pl-"] should work for applying it unless it's a child of .foo– rlemon
Nov 22 '18 at 19:35
div:not(.foo) [class^="pl-"] should work for applying it unless it's a child of .foo– rlemon
Nov 22 '18 at 19:35
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
i tried your solution but it doesn't work. using a class
.pl-header which is a child of div.foo is still applied :/– Websphere
Nov 23 '18 at 20:32
i tried your solution but it doesn't work. using a class
.pl-header which is a child of div.foo is still applied :/– Websphere
Nov 23 '18 at 20:32
seems to work for me
– rlemon
Nov 23 '18 at 20:54
seems to work for me
– rlemon
Nov 23 '18 at 20:54
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13
add a comment |
3 Answers
3
active
oldest
votes
you could do:
[class^="pl-"] {
/* apply your rules */
prop1: value1;
prop2: value2;
}
[class^="pl-header"] {
/* reset only for these */
prop1: unset;
prop2: unset;
}
source
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
add a comment |
There's three different solutions to your problems:
Combine the
[class^="pl-"]selector with the:notpseudo-class:[class^="pl-"]:not(.pl-header).Make use of the child combinator (
>) to target elements that are not the direct child of a specific ID:div:not(#some-id) > [class^="pl-"]Make use of specificity by applying your rules to all classes that start with
.pl, and also applying the default rules specifically to.pl-header. If your.pl-headerrule is more specific than your[class^="pl-"]selector, it will have the default rules applied, thus having the same effect as your selector only targeting the other classes.
Personally I would opt for solution one, though feel free to choose whichver suits your needs best :)
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is.pl-headerthere are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!
– Websphere
Nov 23 '18 at 20:36
add a comment |
Just spell it out. It's not that much to write:
div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"]so i can't write all the combinations :)
– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437123%2fcss-class-name-containing-any-number%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
you could do:
[class^="pl-"] {
/* apply your rules */
prop1: value1;
prop2: value2;
}
[class^="pl-header"] {
/* reset only for these */
prop1: unset;
prop2: unset;
}
source
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
add a comment |
you could do:
[class^="pl-"] {
/* apply your rules */
prop1: value1;
prop2: value2;
}
[class^="pl-header"] {
/* reset only for these */
prop1: unset;
prop2: unset;
}
source
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
add a comment |
you could do:
[class^="pl-"] {
/* apply your rules */
prop1: value1;
prop2: value2;
}
[class^="pl-header"] {
/* reset only for these */
prop1: unset;
prop2: unset;
}
source
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
you could do:
[class^="pl-"] {
/* apply your rules */
prop1: value1;
prop2: value2;
}
[class^="pl-header"] {
/* reset only for these */
prop1: unset;
prop2: unset;
}
source
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
answered Nov 22 '18 at 19:42
Luís SoaresLuís Soares
2,40711636
2,40711636
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
add a comment |
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
I already thought about this but the problem is that they could be many other class names (pl-header, pl-title, ....) so not sure it's a good idea to list all of them :D
– Websphere
Nov 22 '18 at 19:45
add a comment |
There's three different solutions to your problems:
Combine the
[class^="pl-"]selector with the:notpseudo-class:[class^="pl-"]:not(.pl-header).Make use of the child combinator (
>) to target elements that are not the direct child of a specific ID:div:not(#some-id) > [class^="pl-"]Make use of specificity by applying your rules to all classes that start with
.pl, and also applying the default rules specifically to.pl-header. If your.pl-headerrule is more specific than your[class^="pl-"]selector, it will have the default rules applied, thus having the same effect as your selector only targeting the other classes.
Personally I would opt for solution one, though feel free to choose whichver suits your needs best :)
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is.pl-headerthere are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!
– Websphere
Nov 23 '18 at 20:36
add a comment |
There's three different solutions to your problems:
Combine the
[class^="pl-"]selector with the:notpseudo-class:[class^="pl-"]:not(.pl-header).Make use of the child combinator (
>) to target elements that are not the direct child of a specific ID:div:not(#some-id) > [class^="pl-"]Make use of specificity by applying your rules to all classes that start with
.pl, and also applying the default rules specifically to.pl-header. If your.pl-headerrule is more specific than your[class^="pl-"]selector, it will have the default rules applied, thus having the same effect as your selector only targeting the other classes.
Personally I would opt for solution one, though feel free to choose whichver suits your needs best :)
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is.pl-headerthere are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!
– Websphere
Nov 23 '18 at 20:36
add a comment |
There's three different solutions to your problems:
Combine the
[class^="pl-"]selector with the:notpseudo-class:[class^="pl-"]:not(.pl-header).Make use of the child combinator (
>) to target elements that are not the direct child of a specific ID:div:not(#some-id) > [class^="pl-"]Make use of specificity by applying your rules to all classes that start with
.pl, and also applying the default rules specifically to.pl-header. If your.pl-headerrule is more specific than your[class^="pl-"]selector, it will have the default rules applied, thus having the same effect as your selector only targeting the other classes.
Personally I would opt for solution one, though feel free to choose whichver suits your needs best :)
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
There's three different solutions to your problems:
Combine the
[class^="pl-"]selector with the:notpseudo-class:[class^="pl-"]:not(.pl-header).Make use of the child combinator (
>) to target elements that are not the direct child of a specific ID:div:not(#some-id) > [class^="pl-"]Make use of specificity by applying your rules to all classes that start with
.pl, and also applying the default rules specifically to.pl-header. If your.pl-headerrule is more specific than your[class^="pl-"]selector, it will have the default rules applied, thus having the same effect as your selector only targeting the other classes.
Personally I would opt for solution one, though feel free to choose whichver suits your needs best :)
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
answered Nov 22 '18 at 19:45
Obsidian AgeObsidian Age
28.2k72344
28.2k72344
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is.pl-headerthere are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!
– Websphere
Nov 23 '18 at 20:36
add a comment |
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is.pl-headerthere are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!
– Websphere
Nov 23 '18 at 20:36
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
thanks for your solutions, i'll try everything tomorrow and will let you know :)
– Websphere
Nov 22 '18 at 19:49
i tried #1 can't work for me because there is not only 1 selector which is
.pl-header there are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!– Websphere
Nov 23 '18 at 20:36
i tried #1 can't work for me because there is not only 1 selector which is
.pl-header there are plenty of them. it's better to exclude with a parent element just like rlemon suggested but it didn't work! #2 wont work neither because of the direct child. #3 that's the solution i had in mind but too long and complicated to maintain!!– Websphere
Nov 23 '18 at 20:36
add a comment |
Just spell it out. It's not that much to write:
div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"]so i can't write all the combinations :)
– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
add a comment |
Just spell it out. It's not that much to write:
div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"]so i can't write all the combinations :)
– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
add a comment |
Just spell it out. It's not that much to write:
div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
Just spell it out. It's not that much to write:
div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>div[class^="pl-0"],
div[class^="pl-1"],
div[class^="pl-2"],
div[class^="pl-3"],
div[class^="pl-4"],
div[class^="pl-5"],
div[class^="pl-6"],
div[class^="pl-7"],
div[class^="pl-8"],
div[class^="pl-9"] {
background-color: lightgreen;
}
div {
display: inline-block;
height: 50px;
width: 50px;
margin: 5px;
background-color: red;
}<div class="pl-0"></div>
<div class="pl-header"></div>
<div class="pl-1"></div>
<div class="pl-footer"></div>
<div class="pl-2"></div>
<div class="pl-test"></div>
<div class="pl-55"></div>
<div class="pl-99"></div>
<div class="pl-test"></div>
<div class="pl-888"></div>answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
answered Nov 22 '18 at 19:48
Michael_BMichael_B
154k48251361
154k48251361
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"]so i can't write all the combinations :)
– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
add a comment |
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"]so i can't write all the combinations :)
– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:
[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"] so i can't write all the combinations :)– Websphere
Nov 22 '18 at 19:51
haha, it's the lazy way but it's actually way more complicated, here are all the classes i'm using:
[class^="px-"], [class*=" px-"], [class^="pr-"], [class*=" pr-"], [class^="pl-"], [class*=" pl-"] so i can't write all the combinations :)– Websphere
Nov 22 '18 at 19:51
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
Ah, that wasn't in your question. Still, it's 10 selectors for each variation. 60 selectors totals for a complete solution. May be your best bet. (And not sure it's the "lazy way". Seems a bit labor intensive.)
– Michael_B
Nov 22 '18 at 19:53
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
hmm, i'll go for the :not() selector and see what it'll do :) but thanks a lot for your help :)
– Websphere
Nov 22 '18 at 19:54
1
1
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
haha, since i have the conflict only with pl-* I ended up writing down all the combinations for the class .pl-[0-9] :)
– Websphere
Nov 23 '18 at 20:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437123%2fcss-class-name-containing-any-number%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
div:not(.foo) [class^="pl-"]should work for applying it unless it's a child of .foo– rlemon
Nov 22 '18 at 19:35
thanks @rlemon :) i'll try it out and will let you know :) so i guess it's not possible using the [0-9] ??
– Websphere
Nov 22 '18 at 19:40
i tried your solution but it doesn't work. using a class
.pl-headerwhich is a child ofdiv.foois still applied :/– Websphere
Nov 23 '18 at 20:32
seems to work for me
– rlemon
Nov 23 '18 at 20:54
hmm, i'll try it again and will let you know, for sure i must have missed something!!
– Websphere
Nov 24 '18 at 12:13