❃ For styling an HTML element the selector detects the target HTML element on a web page.
- Element selector
- HTML element name (like <p>, <a>, <h1>) match with CSS selector name.
- Simplest case-sensitive way to target an element or same type of all element.
- p { color: red;}
- Class selector
- CSS contains a class name followed by dot(.) and HTML element contain class attribute.
- .myClass { color: #000; }
- ID selector
- CSS contains a ID name followed by dot(.) and HTML element contain ID attribute.
- Case-sensitive and unique.
- #myID { color:#000; }
- Universal selector
- It allows selecting all elements in a page. As it is rarely used to apply a style to every element on a page, it is often used in combination with other selectors. [Ref[1]].
- Syntax: * { ... }
- data-*
- Attribute selectors
- Based on element attributes and attributes values.
- Mainly selector match with attribute name but an optional condition that they may have matched with the attribute value.
- Depending on the match attribute value:
- Presence and value attribute selectors [Ref[1]]
- [attr]: This selector will select all elements with attribute attr, whatever its value. Ex: [data-custom] {...}
- [attr=val]: If attribute value is exist then it works. Ex. input[type="text"]{...}
- [attr~=val]: This selector will select those elements where val is one of a space-separated list of word's contained in attr's value. Ex. [data-play~="football"] { color: red;} (<li data-play="football">Player</li>)
- Substring value attribute selectors
- Attribute selectors in this class are also known as "RegExp-like selectors", because they offer flexible matching in a similar fashion to regular expression (but to be clear, these selectors are not true regular expression)[Ref[1]].
- [attr |= val]: Definitely val is exact either alone or single or multiple val starts with val-. [class|=left] { color: green;}
- [attr ^= val]: Begins (prefixed) with val.
- [attr $= val]: Ends (suffixed) with val.
- [attr *= val]: Like regular expression; if find the val then executed (one occurrence of value within string).
- Pseudo selectors
- Pseudo classes
- Added to a selector that specifies a special state of the selected element(s). [Ref:[1]]
- It's apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors.
- Pseudo class is a keyword.
- Syntax: selector:keyword{...} Ex. a:hover, a:active { color: silver; }
- Style the selected element only when it is in a certain state.
- Pseudo elements
- Added to a selector that lets you style a specific part of selected items. [Ref:[1]]
- Pseudo element is a keyword.
- Syntax: selector::keyword{...} Ex. a:hover, a::after { ... }
- Can accept single colon but standard CSS3 accept double colon.
- ::before
- Creates pseudo element that is the first child of the selected element.
- Default inline.
- It is often used to add cosmetic content to an element with the content property.
- Syntax: selector::before {...}.
- Don't apply to replaced elements like <img>, or to <br> elements without content property.
- ::after
- Creates pseudo element that is the last child of the selected element.
- Default inline.
- It is often used to add cosmetic content to an element with the content property.
- Syntax: selector::after {...}.
- Don't apply to replaced elements like <img>, or to <br> elements without content property.
- ::first-letter
- Applies on first letter + first line + block level element
- Not allow content like images or inline tables.
- Syntax: selector::first-letter {...}.
- A combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. In that case, ::first-letter will match the first letter of this generated content [Ref[1]].
- ::first-line
- Applies on first line + block level element.
- Syntax: selector::first-line {...}.
- ::selection
- Style (highlight) the test when clicking and dragging the mouse across the text.
- Syntax: ::selection {...} or selector::selection {...}.
- Combinators and groups of selectors
- Group or selectors (A,B)
- Any element matching A or/and B.
- Sample: p, a { ... }
- Descendant selector (A B or A >> B)
- Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). the combinator is one or more spaces or dual greater than signs. [Ref[1]]
- Sample: table thead th { ... }
- Direct selector (A > B)
- An element matching B only when B is the direct child of an element A.
- Adjacent sibling selector (A + B)
- Any element matching B that is the next sibling of an element matching A (that is, the next child of the same parent). [Ref[1]]
- General sibling selector (A~B)
- Any element matching B that is one of the next siblings of an element matching A (that is, one of the next children of the same parent).
- Sample: p ~ ul { ... }
Ref[1] https://developer.mozilla.org/en-US/docs/Learn/CSS
No comments:
Post a Comment