Selectors (CSS)

Selectors are the backbone of CSS, allowing the developer to create stylesheets that apply and cascade to many elements at a time.

Selectors

Pseudoclasses

Pseudoclasses are prefaced by a single colon.

Parent

Child

Type

State

Links

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. a:active MUST come after a:hover in the CSS definition in order to be effective. "LoVe, HAte"

If you want to select an element when hovering over an element:

.parent-selector:hover .child-selector { ... } /* Child */
.parent-selector:hover + .sibling-selector { ... } /* Sibling */
/* etc. */

Forms and Inputs

Anchor/URL Hash

/* <div id="cool-thing" class="thing"></div> */
/* if URL is index.html#cool-thing, put border around the div with id "cool-thing" */

.thing:target {
  border: 10px solid red;
}

Meta

Pseudoelements

Pseudoelements are prefaced by two colons.

Content

The ::before and ::after pseudoclasses allow you to place content before or after the selection. They require a content property and a display property. These pseudoclasses are treated like children of the selected element. e.g. 100% width is 100% width of the selected element.

.selector::after {
  content: "";
  display: inline-block;
  height: 100%;          /* same width/height as parent */
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;                /* same position as parent */
  left: 0;
  z-index: -1;
}

References

  1. https://www.w3schools.com/cssref/css_selectors.asp
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Last modified: 202107020516