CSS Selectors Flashcards
CSS Purpose
mainly to prescribe how the various HTML elements in a set of HTML documents should render, on the screen, on paper, or in other media.
Three different ways in that CSS can be used in HTML documents:
- An external style sheet. A reference inside the element (inside the section)
- An internal style sheet. Defined within the element (inside the section)
- An inline style. added directly to the element (which applies the rules) as an attribute
When multiple CSS styles are defined for the same element,
the value from the last read style sheet will be used.
Styles application priority:
- Inline style
- External and internal style sheets
- The browser default value
CSS rule-set components:
- selector(s)
- declaration block(s)
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a
value separated by a colon.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a
value separated by a colon.
CSS selectors are used to find elements in the HTML document based on
element name, ID, class, attribute, or other specifiers.
CSS Selector: Elements div with an attribute class=”even”
div.even
CSS Selector: An element with id=”login”
login
CSS Selector: All elements
*
CSS Selector: All input elements
input
CSS Selector: All p and all div elements
p,div
CSS Selector: All input elements (descendents) inside all div elements
div input
CSS Selector: All input elements that have the div element as the (direct) parent
div > input
CSS Selector: Selects all p elements that are placed immediately after element br
br + p
CSS Selector: Selects all p elements that are placed immediately before element br
p ~ br
XPATH: Elements div with an attribute class=”even”
//div[@class=”even”]
XPATH: An element with id=”login”
//*[@id=”login”]
XPATH: All elements
//*
XPATH: All input elements
//input
XPATH: All input elements inside all div elements
//div//input
XPATH: All input elements that have the div element as the parent
//div/input
CSS Selector: All elements with the lang attribute
[lang]
CSS Selector: All elements with the lang attribute of exactly en
[lang=en]
REVIEW ! CSS Selector: All elements that have the lang attribute equal to en or starting with the string en followed by a hyphen
[lang | =en]
REVIEW ! CSS Selector: All elements that have the lang attribute ending with the string en
[lang$=en]
CSS Selector: All elements that have the lang attribute whose value is a whitespace-separated list of words, one of which is exactly the
string “en”
[lang~=en]
CSS Selector: All elements that have lang attribute containing string en
[lang*=en]
CSS selectors for form elements: Selects all checked elements (for check boxes, radio buttons, and options) that are toggled to an on state
:checked
CSS selectors for form elements: Selects any form element that is the default among a group of related elements
:default
CSS selectors for form elements: Selects all elements that have been defined
:defined
CSS selectors for form elements: Selects all elements that have been disabled
:disabled
CSS selectors for form elements: Selects all elements that have been enabled
:enabled
CSS selectors for form elements: Selects the element currently with focus
:focus
CSS selectors for form elements: Selects the element currently with focus
:focus
CSS selectors for form elements: Selects any form elements that fail to validate
:invalid
CSS selectors for form elements: Selects form elements which do not have required attribute set
:optional
CSS selectors for form elements: Selects any input elements whose current value is outside the min and max attributes
:out-of-range
CSS selectors for form elements: Selects elements which are not editable by user
:read-only
CSS selectors for form elements: Selects elements which are editable by user
:read-write
CSS selectors for form elements: Selects form elements with required attribute set
:required
CSS selectors for form elements: Selects form elements that do validate successfully
:valid
CSS selectors for form elements: Selects the links that a user has already visited
:visited
CSS: Selects the elements that do not match the specified selector
:not()
CSS: Selects all elements that are first children of their parent
elements
:first-child
CSS: Selects all elements that are last children of their parent elements
:last-child
CSS: Selects all elements that are nth children of their parent elements
:nth-child()
CSS: Selects all elements that are nth children of their parent
elements counting from the last child
:nth-last-child()
CSS: Selects all elements that are nth div children of their parent elements
div:nth-of-type()
