Skip to main content
CSS is fun and cool and I like it.
Almanac

:link

The :link selector is a pseudo-class that targets all unvisited anchor (<a>) elements on a page.

a:link {
  color: aquamarine;
}

The example above will change the color of all unvisited links to aquamarine.

When used in combination with the :hover pseudo-class, :link must appear first, or else not be defined at all, in order for the :hover styles to work. This is because they are equally specific, so if :link came after, those styles would override … Read article

Almanac

:in-range

The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable.

<input type="number" min="5" max="10">
input:in-range {
  border: 5px solid green;
}

I believe it's only relevant on input[type=number]. Range inputs don't allow values outside their min/max and it doesn't make much sense on any other type of input. Perhaps text-y inputs with a maxlength, but the behavior on those in most browsers is to prevent entry past the max anyway.… Read article

Almanac

:invalid

The :invalid selector allows you to select <input> elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

This selector has one particular use: providing a user with feedback while they are interacting with a form on the page. The example below uses CSS to turn the “Email” … Read article

Almanac

ID

The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes are denoted in CSS with a “period” (.) before the class name, ID attributes are prefixed with an “octothorpe” (#), more commonly known as a “hash” or “pound sign”.

<header id="site-header"></header>
#header { /* this is the ID selector */
  background: #eee;
}

ID attribute values should be unique. HTML with two or more identical idRead article

Almanac

:hover

The :hover pseudo class in CSS selects elements when the mouse cursor is current over them. It's commonly associated with link (<a>) elements.

a:hover {
  color: green;
  text-decoration: underline overline;
}

So when a link like this is "hovered" (like with a cursor on a device with a mouse):

<a href="https://google.com">Go to Google</a>

It will turn green and have a line beneath and above it.

In IE 6 and below, :hover used to only work on links, but … Read article

icon-link icon-logo-star icon-search icon-star