Apply a CSS class to a selector (in CSS)

Question

Suppose I have a CSS class:

.text-red {
  color: red;
}

This class is defined elsewhere, may be supercomplex, and is not editable.

In my DOM I have several paragraphs. I want to apply text-red class to all paragraphs. Of course I may write that directly:

<p class="text-red">XXX</p>
<p class="text-red">YYY</p>
<p class="text-red">ZZZ</p>
<p class="text-red">WWW</p>

but it is so redundant. I'd like to write in my CSS file something like:

p {
  .text-red
}

so that all "p" elements have that class applied. Clearly this is not a CSS valid rule. How may I do?

You can do this with one line of js or jquery, would you like to see that solution? or are you going for purely css? — Josh Adams, Feb 02 '18 at 19:36

score 0 · Answer 1 · edited Feb 02 '18 at 19:39

0

You can easily do so with SASS pre-processor by using @extend.

Ohterwise, you could use JavaScript (jQuery) as well:

$('p').addClass('.text-red')

But maybe the easiest would be to copy the properties to the p selector?

edited Feb 02 '18 at 19:39

Qwertiy

answered Feb 02 '18 at 19:37

Robert Wolf

How would you do in SASS? I tried with: p { @extend .text-red } But I get: The selector ".text-red" was not found. Clearly the class do exists, but it comes from a standard css file, so I guess SASS is not seeing it... – edoedoedo Feb 02 '18 at 19:54
You're on a good way! I would change the original file to '.scss' and then import it by using @import – Robert Wolf Feb 02 '18 at 21:09

score -1 · Answer 2 · answered Feb 02 '18 at 19:39

-1

This is valid CSS:

p.text-red { color: red; }

answered Feb 02 '18 at 19:39

Barry Kaye

that forces to add the class to all the needed html tags contrary to his question – Alex Mounir Feb 02 '18 at 19:42
1

Not contrary at all - the OP states "I want to apply text-red class to all paragraphs:" and again "all "p" elements" – Barry Kaye Feb 02 '18 at 19:45
correct my fault – Alex Mounir Feb 02 '18 at 19:46
Thanks - pls remove your downvote ;-) – Barry Kaye Feb 02 '18 at 19:47
was not me I assure you, but will up-vote – Alex Mounir Feb 02 '18 at 19:48
The OP appears to want to apply the styles for `.text-red` to all `
` tags, without adding the class to each `
` tag. This code requires that the class be added to each `
` tag.
– showdev Feb 02 '18 at 19:50
Nope - I've read the question again and do not agree. They've even proposed `p { .text-red }` which is essentially close to my answer. – Barry Kaye Feb 02 '18 at 19:54
2

Fair enough. In my opinion, `p { .text-red }` is an attempt to apply `.text-red` styles to all `
` elements, without explicitly defining those styles for `
` elements. It seems the OP wants to avoid adding the class to every `
` element because it is "redundant". I could be wrong, of course.
– showdev Feb 02 '18 at 19:59
I agree with @showdev. Maybe it's the wording, but a solution would simply be `p { color: red }` or whatever styles are in `.text-red`. It may be redundant from a CSS standpoint (as you're not including the original class), but you don't have to add the class to the markup. – disinfor Feb 02 '18 at 21:43

score -2 · Answer 3 · answered Feb 02 '18 at 19:38

-2

Referring you to Child combinator:

example

.text-red > p {
  ...
}

this selects all the p children of .text-red class

answered Feb 02 '18 at 19:38

Alex Mounir

So you mean to place the class on the container? Not seems really related to the question, but in some situations it can be useful. – Qwertiy Feb 02 '18 at 19:40
Some down-votes need to be explained, at least to learn something – Alex Mounir Feb 02 '18 at 19:42
@Qwertiy he mentioned that he doesn't want to specify on each html element. that's the reason for the approach – Alex Mounir Feb 02 '18 at 19:43
1

The OP does not seem to be targeting `
` elements as children of `.text-red`.
– showdev Feb 02 '18 at 19:49
@AlexMounir, he asks about smth like `@include` or `@extends` from css preprocessors. You don't answer that question. I haven't voted on your answer, but I think downvotes are related to that fact. – Qwertiy Feb 02 '18 at 19:50
The op also doesn't want to apply a class to every p tag so the proposed solution could be argued as valid – Alex Mounir Feb 02 '18 at 19:51
I see no mention of @include or extends – Alex Mounir Feb 02 '18 at 19:52
I see. So your intent is that the OP wrap all the `
` elements in a parent element with the `.text-red` class? That's a viable option. I suggest including a working example, to help demonstrate.
– showdev Feb 02 '18 at 19:54
correct, I believe it fits the required criteria and explains basic/core css selectors. – Alex Mounir Feb 02 '18 at 19:55

3 Answers3