table of contents
- Selectors
- universal selectors
- Attribute selectors
- Class selectors
- ID selectors
- Type selectors
- combinators
- Next-sibling combinator (+) 2.Child combinator (>) 3.Descendant combinator( ) 4.Subsequent-sibling combinator (~)
- pseudo-classes
- User Action Pseudo-classes 2.Tree-Structural pseudo-classes
- Pseudo-elements
Selectors
A selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
universal selectors
The universal selector is a special type selector and can therefore be namespaced when using namespace. This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies. it is denoted by (* )
Syntax
* { style properties }
Attribute selectors
The CSS attribute selector matches elements based on the presence or value of a given attribute.
Syntax
Represents elements with an attribute name of attr.
examples
Class selectors
The CSS class selector matches elements based on the contents of their class attribute
syntax
.class_name { style properties }
Example
ID selectors
In order for the element to be selected, its id attribute must match exactly the value given in the selector.
Syntax
#id_value { style properties }
example
Type selectors
The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.
ns|h1 - matches
elements in namespace ns *|h1 - matches all
elements |h1 - matches all
elements without any declared namespace
syntax
element { style properties }
example
combinators
The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
1.Next-sibling combinator (+)
- The next-sibling combinator is made of the “plus sign”
- code point that separates two compound selectors.
- It is also konw as Adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
syntax
- former_element + target_element { style properties }
example%[codepen.io/azmatone/embed/ExRRxLm?default-t.." frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"]
2.Child combinator (>)
- The child combinator (>) is placed between two CSS selectors.
- It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
Syntax
selector1 > selector2 { style properties }
example
3.Descendant combinator( )
A descendant combinator is whitespace that separates two compound selectors.
A selector of the form A B represents an element B that is an arbitrary descendant of some ancestor element A.
such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector
synatx
selector1 selector2 { / property declarations / }
example
4.Subsequent-sibling combinator (~)
The subsequent-sibling combinator is made of the "tilde".
separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
syntax:
former_element ~ target_element { style properties }
example
pseudo-classes
- pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)
- user action pseudo-classes Interactive user interfaces sometimes change the rendering in response to user actions. Selectors provides several user action pseudo-classes for the selection of an element the user is acting on. (In non-interactive user agents, these pseudo-classes are valid, but never match any element.) Examples:
- a:link / unvisited links /
- a:visited / visited links /
- a:hover / user hovers /
a:active / active links /
example
An example of combining dynamic pseudo-classes:
- a:focus
- a:focus:hover
example
2.Tree-Structural pseudo-classes
structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
The structural pseudo-classes only apply to elements in the document tree; they must never match pseudo-elements.
>
- Child-indexed Pseudo-classes
:nth-child Uses An+B notation to select elements from a list of sibling elements.
:nth-last-child Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.
:first-child Matches an element that is the first of its siblings.
:last-child Matches an element that is the last of its siblings.
:only-child Matches an element that has no siblings. For example, a list item with no other list items in that list.
:nth-of-type Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.
:nth-last-of-type Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.
:first-of-type Matches an element that is the first of its siblings, and also matches a certain type selector.
:last-of-type Matches an element that is the last of its siblings, and also matches a certain type selector.
:only-of-type Matches an element that has no siblings of the chosen type selector.