Show HN: Visual Reference to CSS Selectors

* common selector

Select all parts:

div * {
  background: coral;
}

component component selector

Select component(s):

p {
  background: deeppink;
}

.class class selector

Select all parts with the desired class title:

.my-class {
  background: royalblue;
}

#id ID selector

Select the component with the desired ID:

#my-id {
  background: aquamarine;
}

.class.class-2 a number of selectors

Chain two or extra courses or IDs to choose the component(s) which have all the desired courses/IDs:

.my-class.particular {
  background: royalblue;
}

.class, .class-2 comma combinator

Separate a number of selector declarations utilizing a comma. This makes it simple to apply the identical kinds to a number of selector declarations:

.item-1, .item-2 {
  background: sandybrown;
}

.class .class-2 descendant selector

Leave a house (descendant combinator) between selectors to choose component(s) which might be descendant of one other component:

.wrapper .card {
  background: lightblue;
}

.class + .class-2 adjoining selector

Use a plus signal (adjoining combinator) to choose a component that could be a direct sibling to a primary component:

.item-1 + div {
  background: yellowgreen;
}

.class > .class-2 youngster selector

Use a > signal (youngster combinator) to choose component(s) which might be direct kids to one other component:

.wrapper > div {
  background: olive;
}

.class ~ .class-2 subsequent selector

Use a tilde signal (subsequent combinator) to choose each component that’s preceded by the primary component, with out having to be a direct sibling to the primary component:

.item-1 ~ div {
  background: lightcoral;
}

* + * lobotomized owl

A selector sample the place all parts which have a previous sibling are chosen. Use it for instance to add spacing to parts inside a container apart from the primary component, which has no previous sibling:

* + * {
  background: khaki;
}

[attr] attribute selector

Select component(s) which have a specified attribute:

[data-text] {
  background: deepskyblue;
}

[attr=val] attribute & attribute worth

Select component(s) which have the desired attribute and attribute worth:

[data-text="hello"] {
  background: lemonchiffon;
}

[attr~=val] attribute & one of many attribute’s values

Select component(s) which have the desired attribute with certainly one of it is space-separated values matching the worth:

[title~="old"] {
  background: crimson;
}

[attr*=val] attribute & partial worth

Select component(s) which have the desired attribute with val being included within the attribute worth:

[title*="saur"] {
  background: darkgoldenrod;
}

:hyperlink :visited :hover & :lively hyperlink pseudo-class selectors

These 4 pseudo-classes are helpful to choose parts equivalent to hyperlinks in varied states. These 4 are most frequently used with hyperlinks, however :lively can be helpful for buttons and :hover can be utilized on every kind of parts:

• :hyperlink – Targets unvisited hyperlinks. It permits you to model hyperlinks that the consumer hasn’t clicked on but.
• :visited – Targets hyperlinks which have already been visited by the consumer. This pseudo-class permits you to apply kinds to beforehand clicked hyperlinks.
• :hover – Targets parts (generally hyperlinks) when they’re being hovered over by the consumer’s pointer, equivalent to a mouse cursor.
• :lively – Targets parts (sometimes hyperlinks or buttons) throughout the second they’re being activated, like when a consumer clicks on them.

a:hyperlink {
  background: aliceblue;
}
a:visited {
  background: blanchedalmond;
}
a:hover {
  background: honeydew;
}
a:lively {
  background: lavenderblush;
}

:focus centered enter component(s)

The :focus pseudo-class targets a component when it receives focus, equivalent to when a consumer clicks on an enter discipline or navigates to it utilizing the keyboard:

enter:focus {
  border: 2px stable deepskyblue;
  background: lightcyan;
  define: none;
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
}

:checked checked enter component(s)

The :checked pseudo-class targets radio buttons, checkboxes, or choices in a choose component which might be at the moment chosen/checked.

In the next instance I make use of look: none to take away the default styling of the checkbox enter, then use the :checked pseudo-class to model the sibling label, whereas additionally including styling on the label when the checkbox is targeted:

enter[type='checkbox'] {
  /* take away default
     checkbox kinds */
  all: unset;
  -webkit-appearance: none;
  look: none;
  margin: 0;
}
enter[type='checkbox']:checked + label {
  background: mediumseagreen;
}
enter[type='checkbox']:focus + label {
  box-shadow: 0 0 0 2px yellow;
}

:disabled disabled enter component(s)

The :disabled pseudo-class matches type parts like buttons or textual content inputs which might be disabled:

enter[type="text"] {
  padding: 10px;
  border: 2px stable mediumslateblue;
  margin-right: 10px;
}

enter[type="text"]:disabled {
  background: lightgray;
  border: 2px stable darkgray;
  coloration: darkgray;
}

:enabled enabled enter component(s)

The :enabled pseudo-class matches type parts which might be interactive and may obtain enter:

enter[type="text"] {
  padding: 10px;
  border: 1px stable grey;
  margin-right: 10px;
}

enter[type="text"]:enabled {
  background: lightgreen;
  border: 1px stable inexperienced;
}

:legitimate legitimate enter component(s)

The :legitimate pseudo-class is used to goal an enter component that has content material that matches the necessities as specified by its attributes (like sample, sort, and so on.):

enter[type="email"]:legitimate {
  border: 2px stable limegreen;
  background: honeydew;
}

:invalid invalid enter component(s)

The :invalid pseudo-class is used to goal enter parts which have content material that does not match the necessities:

enter[type="email"]:invalid {
  border: 2px stable tomato;
  background: mistyrose;
}

:required required enter component(s)

The :required pseudo-class targets enter parts which have the required attribute, indicating that they should be stuffed out earlier than the shape might be submitted:

enter:required {
  border: 2px dotted orangered;
  background: floralwhite;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.2);
}

:non-compulsory non-compulsory enter component(s)

The :non-compulsory pseudo-class targets enter parts that shouldn’t have the required attribute, implying that they are not necessary to fill out:

enter:non-compulsory {
  border: 2px dotted darkgray;
  background: whitesmoke;
  box-shadow: 0 0 10px rgba(105, 105, 105, 0.2);
}

:first-child first youngster component

The :first-child pseudo-class targets the primary youngster component inside its mum or dad:

div {
  border: 1px dotted grey;
}

div:first-child {
  background: lightblue;
  border-color: deepskyblue;
  border-style: stable;
}

:last-child final youngster component

The :last-child pseudo-class targets the final youngster component inside its mum or dad:

div {
  border: 1px dotted grey;
}

div:last-child {
  background: lightblue;
  border-color: deepskyblue;
  border-style: stable;
}

:nth-child nth youngster component

The :nth-child pseudo-class targets parts primarily based on their place inside their mum or dad, permitting for all kinds of choices:

div {
  border: 1px dotted grey;
}

div:nth-child(2) {
  background: lightcoral;
  border-color: darkred;
  border-style: stable;
}

:nth-last-child nth youngster component, counting backwards from final

The :nth-last-child pseudo-class is analogous to :nth-child, however it counts from the final youngster backwards:

div {
  border: 1px dotted grey;
}

div:nth-last-child(2) {
  background: darkorchid;
  border-color: indigo;
  coloration: white;
  border-style: stable;
}

:only-child solely youngster of a component

The :only-child pseudo-class targets a component if it is the one youngster component of its mum or dad:

div {
  border: 1px dotted grey;
}

div:only-child {
  background: lightsalmon;
  border-color: darksalmon;
  border-style: stable;
}

:first-of-type first component of a kind

The :first-of-type pseudo-class targets the primary component of its sort inside its mum or dad:

p, div {
  border: 1px dotted grey;
}

div:first-of-type {
  background: lightyellow;
  border-color: gold;
  coloration: darkorange;
  border-style: stable;
}

:last-of-type final component of a kind

The :last-of-type pseudo-class targets the final component of its sort inside a mum or dad:

p, div {
  border: 1px dotted grey;
}

p:last-of-type {
  background: lightyellow;
  border-color: gold;
  coloration: darkorange;
  border-style: stable;
}

:nth-of-type nth component of a kind

The :nth-of-type pseudo-class matches parts primarily based on their sort and place amongst siblings:

p, div {
  border: 1px dotted grey;
}

p:nth-of-type(3) {
  background: lightyellow;
  border-color: gold;
  coloration: darkorange;
  border-style: stable;
}

:nth-last-of-type nth component of sort, counting backwards

The :nth-last-of-type pseudo-class matches parts primarily based on their sort and place amongst siblings, however counting from the top:

p, div {
  border: 1px dotted grey;
}

div:nth-last-of-type(3) {
  background: lightyellow;
  border-color: gold;
  coloration: darkorange;
  border-style: stable;
}

:only-of-type solely component of its sort

The :only-of-type pseudo-class targets a component that’s the solely component of its sort amongst its siblings:

p, div {
  border: 1px dotted grey;
}

:only-of-type {
  background: lightyellow;
  border-color: gold;
  coloration: darkorange;
  border-style: stable;
}

:goal goal component selector

The :goal pseudo-class selects a component with an ID attribute matching the URL fragment (eg: https://example.com/#fragment).

:goal is usually used to model sections of a web page which might be straight linked to, sometimes used with in-page hyperlinks:

div:goal {
  border: 3px stable deepskyblue;
  background-color: lightcyan;
  rework: scale(1.05);
}

:not() negation pseudo-class

The :not() practical pseudo-class permits you to goal parts that don’t match a specified selector or situation. It’s primarily an exclusion filter:

div:not(.exclude) {
  border: 2px stable royalblue;
  background: aliceblue;
}

:has() mum or dad selector

The :has() practical pseudo-class permits to model a component if it comprises a sure component or one other selector:

div:has(p.particular) {
  border: 2px stable darkkhaki;
  background-color: peachpuff;
}

::earlier than first youngster pseudo-element

The ::earlier than pseudo-element is used to insert content material earlier than the content material of a component. It can be utilized to add ornamental content material, icons, or different parts that do not want to be within the precise DOM:

.alert::earlier than {
  content material: '⚠️ ';
  margin-right: 0.25rem;
}

::after final youngster pseudo-element

The ::after pseudo-element is analogous to ::earlier than and is used to insert content material after the content material of a component:

.data::after {
  content material: '';
  show: inline-block;
  width: 0.75rem;
  top: 0.75rem;
  border-radius: 35%;
  background: darkseagreen;
  margin-left: 0.35rem;
  rotate: 45deg;
  vertical-align: center;
}

::first-letter first letter pseudo-element

The ::first-letter pseudo-element is used to model the primary letter of a block-level component, permitting for design parts like drop caps:

p::first-letter {
  font-size: 2em;
  font-weight: daring;
  float: left;
  coloration: crimson;
}

::first-line first line pseudo-element

The ::first-line pseudo-element is used to model the primary line of a block-level component. This permits for typographic results that may adapt dynamically primarily based on the scale of the containing component and the font measurement:

p::first-line {
  font-weight: daring;
  coloration: darkslategray;
  text-transform: uppercase;
}

::placeholder textual content enter placeholder

The ::placeholder pseudo-element is used to model the placeholder textual content of type fields like and :

enter::placeholder {
  font-style: italic;
  coloration: thistle;
  opacity: 0.7;
}

::choice model highlighted field

The ::placeholder pseudo-element is used to model the portion of a component that has been highlighted or chosen by the consumer. For occasion, when a consumer clicks and drags to choose textual content, the ::choice pseudo-element can be utilized to modify the background coloration, textual content coloration, and different kinds of that choice:

::choice {
  background-color: gold;
  coloration: darkblue;
}

::marker record marker pseudo-element

The ::placeholder pseudo-element is used to model marker bins in record gadgets, which generally include bullets (for unordered lists) or numbers/letters (for ordered lists).

Before the introduction of the ::marker pseudo-element, customizing these markers typically required workarounds, however this pseudo-element offers us a bit extra management:

li::marker {
  coloration: LightSeaGreen;
  font-size: 1.5em;
  font-weight: daring;
}

More pseudo-classes

Here’s some extra pseudo-classes which might be accessible in CSS:

• :root: Targets the highest-level mum or dad component in a doc, sometimes the component in HTML paperwork. Useful to outline CSS variables that can be accessible to all parts throughout the web page.
• :is(): Matches parts that may be certainly one of a number of selectors, making lengthy selector lists shorter and simpler to learn. For instance, :is(h1, h2, h3) would match any of these three heading parts.
• :the place(): Similar to :is(), however permits for choosing parts primarily based on situations with out affecting the specificity of the selector.
• :default: Matches UI parts (like radio buttons or checkboxes) which might be set to their default choice state.
• :empty: Selects parts that don’t have any kids (together with textual content nodes).
• :fullscreen: Targets parts which might be at the moment displayed in fullscreen mode.
• :in-range: Matches type parts with a worth that’s throughout the specified vary (utilizing attributes like min and max).
• :out-of-range: Matches type parts with a worth that’s outdoors the desired vary.
• :indeterminate: Targets type parts whose state is unsure, equivalent to a checkbox that is neither checked nor unchecked (typically seen in tree-view constructions).
• :read-only: Matches type parts that aren’t editable by the consumer, due to the readonly attribute.
• :read-write: Targets type parts which might be editable by the consumer, implying they don’t seem to be readonly.
• :lang(): Matches parts primarily based on their language attribute. E.g., :lang(en) selects parts outlined in English.