::selection ::inactive-selection ::spelling-error ::grammar-error ::marker ::placeholder
::backdrop ::cue ::part() ::slotted()
Estelle Weyl | @estellevw | Github | Press → key to advance.
::after (:after) ::before (:before) ::first-letter (:first-letter) ::first-line (:first-line)
::selection ::inactive-selection ::spelling-error ::grammar-error ::marker ::placeholder
::backdrop ::cue ::part() ::slotted()
Pseudo-classes select elements that already exist.
Pseudo-elements create "faux" elements you can style.
::after (:after) ::before (:before) ::first-letter (:first-letter) ::first-line (:first-line)
The double colon notation was introduced to “establish a discrimination between pseudo-classes and pseudo-elements.”
For compatibility, browsers accept the one-colon notation for pseudo-elements introduced in CSS levels 1 and 2, but not for newer pseudo-elements
::selection ::inactive-selection ::spelling-error ::grammar-error ::marker ::placeholder
::backdrop ::cue ::part() ::slotted()
<p>the content</p>
the content
<p>
<before>before content - </before>
the content
<after> - after content</after>
</p>
Try it out
::after (:after) ::before (:before) ::first-letter (:first-letter) ::first-line (:first-line)
::selection ::inactive-selection ::spelling-error ::grammar-error ::marker ::placeholder
::backdrop ::cue ::part() ::slotted()
::selectionMatches the part of a document highlighted by user.
limited stylability:
color,
background-color,
cursor,
caret-color,
outline,
text-decoration,
text-emphasis-color, and
text-shadow can be styled. background-image can not.
For mobile but impacts desktop too:
.noSelection { /* pre */
-webkit-tap-highlight-color: #bada55;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
Similar to ::selection, but ::selection applies to active selections. ::inactive-selection applies to inactive selections
Example: selected area when the document window is inactive and therefore not receiving events.
::spelling-errorThe portions of text that have been flagged by the user agent as misspelled.
::grammar-errorThe portions of text that have been flagged by the user agent as grammatically incorrect.
::spelling-error and ::grammar-errorBecause the styling of spelling and grammar errors can leak information about the contents of a user’s dictionary (which can include the user’s name and even includes the contents of their address book!) UAs that implement ::spelling-error and ::grammar-error must prevent pages from being able to read the styling of such highlighted segments.
limited stylability:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow
background-image can not.
Introduced in spec June 2016
::marker The bullet, or marker, of a list item.
Currently, only limited CSS properties apply:
color and contenttext-combine-upright, unicode-bidi, and direction properties::placeholderThe placeholder text in an input field
::after (:after) ::before (:before) ::first-letter (:first-letter) ::first-line (:first-line)
::selection ::inactive-selection ::spelling-error ::grammar-error ::marker ::placeholder
::backdrop ::cue ::part() ::slotted()
::backdropBackdrop is displayed when dialog is opened with dialog.showModal()
dialog::backdrop {
background: rgba(255,0,0,.25);
}
video::backdrop {
background-color: #448;
}
::cueWebVTT Node Objects that are in the past or future
:future :past
Matches WebVTT Internal Node Objects
::cue ::cue(s1)
Matches any list of WebVTT region objects
::cue-region ::cue-region()
::cue / ::cue(s1)Style captions and other cues in media with text tracks
Limited stylability:
- color
- opacity
- visibility
- text-decoration
- text-shadow
- background /* applied to the WebVTT cue background box */
- outline
- font
- line-height
- white-space
- text-combine-upright
- ruby-position
::part()Matches element within a shadow tree that has a matching part attribute.
custom-element-name::part(partvalue) {
/* Styles for node that has part="partvalue" set */
}
<custom-element-name>
<div part="partvalue">
Foo Bar
</div>
</custom-element-name>
::slotted()Element placed into slot in an HTML template
<x-bar>
<div id="one" slot="foo" class="foo">...</div>
<div id="two" slot="foo">...</div>
<div id="three" class="foo">
<div id="four" slot="foo">...</div>
</div>
</x-bar>
::slotted(*) { /* #one and #two only.
#three has no slot attribute
#four is not a direct children of shadow host so can't have a slot */
}
::slotted(.foo) { /* matches #one. */ }
You can inspect pseudo-elements like::first-letter, ::first-line, ::before, ::after, ::cue, ::marker, and ::backdrop, and browser specific pseudo-elements like::-moz-progress-bar in DevTools
::-ms-browse ::-ms-value ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-lower ::-ms-fill-upper ::-ms-reveal ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track
::-moz-anonymous-block ::-moz-anonymous-positioned-block ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content ::-moz-focus-inner ::-moz-focus-outer ::-moz-inline-table ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-svg-foreign-content ::-moz-table ::-moz-table-cell ::-moz-table-column ::-moz-table-column-group ::-moz-table-outer ::-moz-table-row ::-moz-table-row-group ::-moz-viewport ::-moz-viewport-scroll ::-moz-xul-anonymous-block
::-webkit-progress-bar ::-webkit-progress-value ::-webkit-meter-even-less-good-value ::-webkit-inner-spin-button ::-webkit-outer-spin-button ::-webkit-scrollbar ::-webkit-scrollbar-button ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track