way control 'when' before Pseudo-element is used? |
way control 'when' before Pseudo-element is used? |
CharliePrince |
Nov 14 2020, 09:14 PM
Post
#1
|
Novice Group: Members Posts: 24 Joined: 7-November 20 From: Saint Louis, MO Member No.: 27,623 |
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 |
Nov 14 2020, 09:23 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 15 2020, 02:30 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
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 |
Nov 15 2020, 02:42 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. QUOTE 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 |
Nov 15 2020, 04:55 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
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). QUOTE 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 |
Nov 15 2020, 05:52 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
|
Christian J |
Nov 15 2020, 07:04 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
Now my head is spinning.
|
pandy |
Nov 15 2020, 10:28 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Oooh! Like in The Exorcist?
|
Christian J |
Nov 16 2020, 04:08 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
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 |
Nov 16 2020, 04:12 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Nov 17 2020, 09:42 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Now look what you've done. You and you're spinning head have scared CharliePrince away.
|
Lo-Fi Version | Time is now: 26th April 2024 - 02:19 PM |