CODEWITHSUNDEEP
cssoptimization
bo.
bo.

Reputation: 57

optimizing CSS selectors. Is `*+p` less costy than `p+*`

According to what I know about browsers' algorithm of CSS processing, selector *+p has less perfomance impact than p+*, doesn't it?

So, in the p+* browser scans through all elements on the page, and those that follow p are applied a corresponding rule. In the *+p firstly it looks only for p, but does it stop the search immediateliy after finding some element before p, thus making less "search iterations"? Or * still scans here everything.

Also, which tools can show CSS loading time and other 'heavyweight' information. Found only those that search for unused or excess rules and compress the CSS for getting less size.

In context - I need to apply top-margin to any element that follows p (except p+p), the content is generated dynamically. Having read that old browsers suffer much of universal selector, this very question had arised.

Upvotes: 0

Views: 78

Answers (2)

MarioDS
MarioDS

Reputation: 13063

How about just adding bottom margin to all p elements, wouldn't that have the same result? You can then add a rule for p+p with negative top margin to counteract the effect, e.g.:

p {
    margin-bottom: 10px;
}

p + p {
    margin-top: -10px;
}

Upvotes: 1

SW4
SW4

Reputation: 71170

I need to apply top-margin to any element that follows p (except p+p)

What about:

p + :not(p) {
    background:red;
}

As far as performance/efficiency, look at either the Page Speed (FF) or Speed Tracer (Chrome) browser extensions, both of which will help you analyse/identify problem CSS.

Upvotes: 1

Related Questions