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

asked Nov 22 '18 at 19:32

Websphere

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

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 |

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

asked Nov 22 '18 at 19:32

Websphere

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

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 |

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

asked Nov 22 '18 at 19:32

Websphere

18113

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

Websphere

18113

asked Nov 22 '18 at 19:32

Websphere

18113

asked Nov 22 '18 at 19:32

Websphere

18113

asked Nov 22 '18 at 19:32

Websphere

18113

asked Nov 22 '18 at 19:32

Websphere

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

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

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

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

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 |

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 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 :not pseudo-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-header rule 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 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-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_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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

3 Answers
3

active

oldest

votes

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 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 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 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 Soares

2,40711636

answered Nov 22 '18 at 19:42

Luís Soares

2,40711636

answered Nov 22 '18 at 19:42

Luís Soares

2,40711636

answered Nov 22 '18 at 19:42

Luí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 |

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 :not pseudo-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-header rule 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 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-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 |

There's three different solutions to your problems:

Combine the [class^="pl-"] selector with the :not pseudo-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-header rule 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 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-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 |

There's three different solutions to your problems:

Combine the [class^="pl-"] selector with the :not pseudo-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-header rule 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 Age

28.2k72344

There's three different solutions to your problems:

Combine the [class^="pl-"] selector with the :not pseudo-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-header rule 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 Age

28.2k72344

answered Nov 22 '18 at 19:45

Obsidian Age

28.2k72344

answered Nov 22 '18 at 19:45

Obsidian Age

28.2k72344

answered Nov 22 '18 at 19:45

Obsidian 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-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 |

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

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

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_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_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_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_B

154k48251361

answered Nov 22 '18 at 19:48

Michael_B

154k48251361

answered Nov 22 '18 at 19:48

Michael_B

154k48251361

answered Nov 22 '18 at 19:48

Michael_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 |

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

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

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 |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr