CSS Selector

Creator

Creator

Seonglae Cho

Created

Created

2021 Feb 25 13:46

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Oct 23 5:43

Refs

Refs

id 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

CSS pseudo Class

CSS Multi Selector

CSS Attribute Selector

CSS pseudo elements

Learning Game

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.

CSS Diner

https://flukeout.github.io/

CSS Diner

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

Selectors Level 3

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

Recommendations

////////