Using :not

I need to add a not to the css below, but cant work it out.

p.required::after, h5.required::after, span.required::after, :not(span.required p::after) {
    content: "*";
    color: white;
    margin-left: 0.188em;
    font-size: large;
}

to allow it to happen here

span.required p::after {
    content: "*";
    position: absolute;
    margin-left: 3px;
    font-size: large;
    margin-top: -5px;
}

that is “Everything on the page except for this.”

What are you TRYING to target?

Hi m_hutley :),

Well whats happening is this below, so I’m ending up with 2 asterix.

<span class="textSizeStandard text title required">
<p class="text title textSizeStandard alignCenter text" id="lblSampleTypeEnglishText">
Name (English)
::after</p>
</span>
::after

The not I’m trying to build in will stop the second ::after appearing, and allow the first one to stay.
In most cases there no p inside the span, but because of the way the c# is I cant change it, so Im trying to control it via css.

So by saying yes keep span.required::after, I dont want it to happen when there a p inside the span, the second class function will deal with that, as I have it in the code example above.

Thanks for all the help buddy, true star!

span.required p::after would only target the first one The second ::after is not part of a p element that is inside of a span.required. So… style it with span.required::after (though technically where you’ve put ::after in that code block is inaccurate, you’ve put it as the span’s parent’s ::after.

To clarify: ::after specifies a pseudoelement that is the last child of the targetted tag(s).

Right, I’m reading it through now, and thinking it through

As an aside that html is invalid and you are not allowed to nest a p element inside a span. The span needs to be a div or the p needs to be another inline element like a span.:slight_smile:

1 Like

Oh god, loads of issues. But dont think the p inside the span is going to change, its a c# driven product and in this case it happens.

I was really hoping I could use that :not to just turn the one off i didnt want to use, to then allow the second class function to handle it.

Annoying

Can you show an example where two asterisk are showing as the code you proposed doesn’t show that happening?

Also I believe the :not() selector can only contain simple selectors and not pseudo elements like :after (and I believe descendant selectors would be invalid also).

Ye sure, so this is how my css works, and in honesty it works fine, as it allows all the asterix to appear all the way through the system, just in the case where the p appears inside the span I then end up with 2 asterix.

So this is the css

p.required::after, h5.required::after, span.required::after {
    content: "*";
    color: white;
    margin-left: 0.188em;
    font-size: large;
}

span.required p::after {
    content: "*";
    color: white;
    position: absolute;
    margin-left: 3px;
    font-size: large;
    margin-top: -5px;
}

Then this is the full div where both asterix appear.

<div class="col-4 formLabel">
<span class="textSizeStandard text title required">
<p class="text title textSizeStandard alignCenter text" id="lblSampleTypeEnglishText">
Name (English) *
</p>
*
</span>
</div>

Ye I was thinking that about :not allowing pseudo elements

I’m still a little confused as surely you don’t need that second rule (span.required p::after)? Or just turn it off:

span.required p::after{display:none;}

What scenario am I missing where you need that second rule?

All this is dynamic,

This:

span.required::after

pretty much covers all the asterix 99% of the time, as there no p inside the span.

In very small cases ‘p’ appears inside the span, but what was happing is that the asterix goes to the second line, where its supposed to sit next to the word. So to solve this issue, and for the case where the p is used I created the second class function to set the asterix to an absolute position and then can handle it that way.

But what happens is that both asterix then appear, as the one is for the span the general one, and the other is for the p.

Does that make sense

I think you’re approaching it the wrong way and if you make the p display:inline when its inside the span then the asterisk will be in the right place.

e.g.

.required p{
	display:inline;
}

There is no need for the asterisk using :after the p element.

1 Like

PaulOB your a star, lol I’ve been awarding stars out today like sweets, but thanks for the new eyes.

Ye of course, and it worked perfectly.

Thank you all

1 Like