Seonglae Choid is fastest & pseudo class is slowest
Selector Performance Rank
- id (#myid)
- class (.myclass)
- tag (div, h1, p)
- adjacent sibling (h1 + p)
- child (ul > li)
- descendent (li a)
- universal (*)
- attribute (a[rel=”external”])
- pseudo-class and pseudo element (a:hover, li:first)
CSS Selectors
Learning Game
CSS Diner
You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all elements) and applies the margin-bottom style.
https://flukeout.github.io/
selectors
Selectors Level 3
Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.
https://www.w3.org/TR/selectors-3/#selectors
text
A way to match on text using CSS locators
Thanks for contributing an answer to Software Quality Assurance & Testing Stack Exchange! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience.
https://sqa.stackexchange.com/questions/362/a-way-to-match-on-text-using-css-locators
CSS [attribute~=value] Selector
Select and style elements with a title attribute containing the word "flower": [title~=flower] { background-color: yellow; } Try it Yourself " The [ attribute~= value] selector is used to select elements with an attribute value containing a specified word. The numbers in the table specifies the first browser version that fully supports the selector.
https://www.w3schools.com/cssref/sel_attribute_value_contains.asp
![CSS [attribute~=value] Selector](https://www.w3schools.com/images/w3lynx_200.png)