This is the 14th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021.
Past links: CSS selector
“CSS Selector”
preface
We or a piece of content, to continue our CSS selectors classification, today to introduce is the condition of our choice and state selector, selector, may develop at ordinary times contact less, but state selector, you must often, especially in the form of fill in, for example: focus, : Valid, now let’s look at what kind of selectors are available.
classification
Conditional selector
| The selector | instructions |
|---|---|
| :is | The node that specifies the condition |
| :has | The node that contains the specified element |
| :not | Element that does not specify a condition |
| :lang | Specifies a node for the markup language |
| :dir() | Node that specifies the direction of authoring |
| :where | The node that specifies the condition |
| :scope | Specify nodes as reference points |
| :any-link | All linked nodes that contain href |
| :local-link | All link nodes that contain href and are absolute addresses |
State selector
| The selector | instructions |
|---|---|
| :link | A link node that is not accessed |
| :focus | Enter the focused form node |
| :valid | Enter a valid form node |
| :blank | Enter an empty form node |
| :past() | Browsed nodes |
| :target | Node of the current anchor point |
| :paused | A media node that pauses playback |
| :visited | The linked node that has been visited |
| :invalid | Enter an invalid form node |
| :future() | Unbrowsed nodes |
| :playing | The media node that starts playback |
| :checked | Options the selected form node |
| :enabled | The event-enabled form node |
| :current() | Nodes in View |
| :required | Enter the required form node |
| :in-range | The form node within the input range |
| :optional | Option Optional form node |
| :disabled | Event disables the form node |
| :read-only | A read-only form node |
| :read-write | Readable and writable form nodes |
| :user-invalid | Enter a valid form node |
| :focus-within | Nodes whose internal form elements are in focus state |
| :focus-visible | Enter the focused form node |
| :out-of-range | A form node outside the input range |
| :target-within | The node where the internal anchor element is active |
| :indeterminate | Form nodes with undetermined options |
| :placeholder-shown | Placeholder display of the form node |
Ok, that’s all for today, no line, no line, this form is shot out of sight, I’ll write it tomorrow, bye bye!!