CODEWITHSUNDEEP
csspseudo-element
Josh Powell
Josh Powell

Reputation: 6297

How can I set a default pseudo styles in my css?

I wanted to start minifying the css I have to write and figured this would save a bunch of lines in the long run.

I want to set a global(default) style for :before and :after so I don't have to keep repeating styles like content: ""; over and over throughout my css.

I then decided to give it a try in a JSFIDDLE and had some odd behaviors.

Edit

How can I apply certain styles, like content: ""; only to elements I assign a pseudo element to? The sample code in the fiddle applies a pseudo element to any element in the DOM not just elements I assign a pseudo element to.

Lets say I have the following code:

<div></div>

and

<div class="sideTri"></div>

with the following css:

:before {
    content: "";
}

.sideTri:before {
    height: 0;
    width: 0;
    border-top: 10px solid brown;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    right: 0;
    bottom: 100%;
}

This will assign a pseudo :before to both of the elements and not just the class I am assigning a pseudo element to.

End Edit

Upvotes: 0

Views: 91

Answers (1)

BoltClock
BoltClock

Reputation: 723729

Yes, these pseudo-elements are being applied to html, head, body and all of their descendants (at least, where applicable according to the spec). The two that you see belong to html and body respectively. (You don't see the ones generated by head or its descendants because they're hidden by default, but they are there.)

You can restrict this with a body selector:

body :before {
    content: "";
    width: 20px;
    height: 20px;
    background: black;
    display: block;
}

But I strongly advise against applying :before and :after pseudo-elements universally like this, if nothing else because it creates unnecessary overhead — every element now has to draw an additional pseudo-element box.

There is virtually no sensible use case for having every element generate a pseudo-element. It's usually a much better idea to limit which elements to apply them to rather than to just have them apply on everything; that way you exercise the greatest control over them.

Upvotes: 3

Related Questions