way control 'when' before Pseudo-element is used? Options

[CharliePrince]

I have some css that looks like this

CODE

h1:before {
  content: "hello "
}

I'm trying to figure out how to make some <h1>s in the html not be formatted by the before Pseudo-element

I want some <h1>s to be and other <h1>s not to be if that makes sense

Does anyone know how?

[pandy]

Give the headings you want to have the hello a class.

CODE

h1.foo:before  { content: 'hello' }

Or use just the class.

CODE

.foo:before  { content: 'hello' }

HTML

<h1 class="foo">Blah blah blah</h1>
<h1>Blah blah blah</h1>

Some may argue that a page shouldn't have multiple H1, but that's another discussion.

[Christian J]

I don't think you can remove a pseudo-element once defined elsewhere in the CSS. Maybe one can argue that pseudo-elements are always there (even when not defined), but doesn't have any effect until you've specified e.g. a "content" value for them? If so, I suppose you could remove the value of the "content" property:

CODE

h1:before {content: "hello";}
h1.special:before {content: none;}

But in practice, pandy's approach usually makes more sense (unless maybe if all H1's but one uses the generated content, and you don't want to give all of them a CLASS).

[pandy]

I don't think you can remove a pseudo-element once defined elsewhere in the CSS.

I think you can. How do you mean? What you posted works fine.

But in practice, pandy's approach usually makes more sense (unless maybe if all H1's but one uses the generated content, and you don't want to give all of them a CLASS).

A matter of taste, but I always class what differs from the normal, even if that means sprinkling more classes around than if I had classed what should display normal. It's more logical - to me. Others may think differently.

[Christian J]

I don't think you can remove a pseudo-element once defined elsewhere in the CSS.

I think you can. How do you mean? What you posted works fine.

I meant the literal ":before" syntax, not the the outcome (the content property value).

A matter of taste, but I always class what differs from the normal, even if that means sprinkling more classes around than if I had classed what should display normal. It's more logical - to me. Others may think differently.

I agree, at least when making a new page. But suppose you need to restyle a large existing site with countless H1 elements? Then it might be easier and safer to avoid adding CLASS attributes in the HTML.

[pandy]

I meant the literal ":before" syntax, not the the outcome (the content property value).

Just like you can't remove any other selectors, just override them?

[Christian J]

Now my head is spinning.

[pandy]

Oooh! Like in The Exorcist?

[Christian J]

No, the other direction.

But seriously, it's interesting that you can override a property value, but you can't cancel the selector "hook" once defined. It's the same with @media queries, once one is defined all you can do is cancel all rules inside it.

[pandy]

I don't think so. I think this should be seen as you touched on. The structures are there all the time, either we do something with them with CSS or not. We create a pseudo element as little as we create a P from CSS. We just reference what's already there. Even if there's nothing before an element there is a before...

BTW I'm more like Max von Sydow, busy driving out evil.

[pandy]

Now look what you've done. You and you're spinning head have scared CharliePrince away.