Menu
If we wanted to target a link within a paragraph, which selector would be more efficient/faster?
p a
or
p > a
975
The selector abobe should be the fastest.
Class selector is the most useful common selector used by the developers. You can define the class selector using period (.) followed by the class name. It gives styling to all elements with a specified class attribute.
The CSS child selector is used to select all child elements with a particular parent element.
The first selector indicates the parent element. The second selector indicates the child element CSS will style. The example below selects all <p> elements that are children of the <div> element: The CSS selector using the > symbol only selects direct children.
The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style. The example below selects all <p> elements that are children of the <div> element: The CSS selector using the > symbol only selects direct children.
This page will explain the most basic CSS selectors. The element selector selects HTML elements based on the element name. The id selector uses the id attribute of an HTML element to select a specific element.
The child combinator selects elements that match the second selector and are the direct children of the first selector. Operators make it easier to find elements that you want to style with CSS properties.
The second is (extremely) marginally faster. CSS is handled in reverse by browsers, so both your rules are tested on all a elements on the page. For the second rule it only needs to test the direct parent, for the other one it would need to test the entire descendant chain.
In practice, the execution time difference won't be statistically significant until you get tens of thousands of these on a page with just as many lines of HTML.
75
Let me show you the efficiency order of selectors, from fastest to the slowest, that's some conclusion from google:
It might not be exactly right, and not being right for various of browsers, but still this order is available for reference. Hope it helps!
To see more about CSS performance, see: http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
