Articles by
Sara Cope

:enabled

The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements includes ones in that you can select, that you can enter data into, or that you can focus on or click.

So when a checkbox is checked, and you are targeting the label immediately after it:

input:enabled + label {
  color: #333;
  font-style: italic;
} 
 

The label text will dark grey and italic if the checkbox is enabled, meaning the user can toggle it on and off.

In theory, :enabled should match an <a>, <area>, or <link> with href attributes, but browsers don't seem to handle that scenario. You can style <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>s that are not disabled. When <menu> is supported, we should also be able to target <command> and <li>'s that are children of <menu>, if not disabled.

You would also think that elements with contenteditable and tabindex attributes would be selectable with the :enabled pseudoclass. The spec does not state this, nor do browsers support it.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
All 3.1 All 9 9 All All

:first-of-type

The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title and several paragraphs:

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>

We want to make the first paragraph larger, as a sort of “lede” or introductory paragraph. Instead of giving it a class, we can use :first-of-type to select it:

p:first-of-type {
  font-size: 1.25em;
}

Using :first-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-child(1), nothing would happen because the paragraph is not the first child of its parent (the <article>). This reveals the power of :first-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :first-of-type and a related pseudo-class selector, :last-of-type.

Check out this Pen!

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works 3.2+ Works 9.5+ 9+ Works Works

:first-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.

:last-of-type

The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title, several paragraphs and an image:

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <img src="...">
</article>

We want to make the last paragraph smaller, to act as a conclusion to the content (like an editor's note). Instead of giving it a class, we can use :last-of-type to select it:

p:last-of-type {
  font-size: 0.75em;
}

Using :last-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-last-child(1), nothing would happen because the paragraph is not the last child of its parent (the <article>). This reveals the power of :last-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :last-of-type and a related pseudo-class selector, :first-of-type.

Check out this Pen!

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works 3.2+ Works 9.5+ 9+ Works Works

:last-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.

letter-spacing

The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), parent-relative values (percentage), absolute values (px) and the normal property, which resets to the font's default.

Using font-relative values is recommended, so that the letter-spacing increases or decreases appropriately when the font-size is changed, either by design or by user behavior.

p {
  /* 16 * 0.0625 = 1px */
  letter-spacing: 0.0625em;
}

The most important point to note when using letter-spacing is that the value specified does not change the default, it is added to the default spacing the browser applies (based on the font metrics). letter-spacing also supports negative values, which will tighten the appearance of text, rather than loosening it.

Points of Interest

  • Subpixel values: in most browsers, specifying a value that computes to less than 1px will result in no letter-spacing being applied. Currently Firefox 14+ and IE 10 support subpixel layout; Opera and WebKit do not. The patch has landed, so WebKit now supports subpixel letter-spacing.
  • The letter-spacing property is animatable with CSS Transitions.
  • One of the ways to fight against the space between inline block elements is setting letter-spacing: -4px; on the parent container of inline-block elements. You will then need to reset letter-spacing: normal; on the child elements.
  • It is rarely if ever a good idea to letter space lower case letters.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Most Works Works Works

A note on mobile browser support: some versions of Opera Mobile, non-standard WebKit implementations, and the NetFront browser do not support letter-spacing. The specifics are detailed in the QuirksMode link above.

word-spacing

The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters.

p {
    word-spacing: 2em;
}

word-spacing can receive three different values:

  1. the “normal” keyword, which resets the default spacing
  2. length values using any CSS units (most commonly px, em, rem)
  3. the “inherit” keyword, which applies the word-spacing of the parent element

Best practice at this time would be to use em. Font size can be adjusted, so using pixels for this could cause problems at the spacing between words wouldn't scale as their size did. rem is great usually, but browser support is lower and in this use case it's probably best the spacing is relevant directly to the words it is being applied to, not the root.

It is important to note that “word” in this context actually refers a singular piece of inline content—which means that word-spacing affects inline-block elements as well as inline elements. In this example, several such elements are spaced by setting the word-spacing of their parent container:

Check out this Pen!

Points of Interest

  • The word-spacing property is animatable with CSS Transitions.
  • While use of the “percentage” value to determine spacing is permitted as per the spec, it can yield unpredictable results — often simply no effect at all.
  • Setting white-space to zero is one of the ways to fight against the space between inline block elements.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Most Works

A note on Android browser support: The vast majority of Android devices support word-spacing—however, some devices using non-Apple builds of Webkit or the Netfront browser do not. The specifics are detailed in the QuirksMode link above.

:checked

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (<input>) elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.

So when a checkbox is checked, and you are targeting the label immediately after it:

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 

The label text will turn from grey italic to red normal font.

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label> 

The above is an example of using the :checked pseudo-class to make forms more accessible. The :checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries.

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ Any 9+ 9+ any any

::first-letter

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a <firstletter> tag. You can style that first letter as you would a real element with:

p::first-letter {
  font-weight: bold;
  color: red;
}
<p>
 The first letter is bold and red
</p>

The result is as if you had a faux element around the first letter:

<p>
 <firstletter>T</firstletter>
 he first letter is bold and red
</p>

The first letter is bold and red

  • The pseudo element only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
  • If you have both a ::first-letter and ::first-line on an element, the first letter will inherit from the first line styles, but styles on the ::first-letter will overwrite when styles conflict.
  • If you generate content with ::before, the first letter or punctuation character, whether it's part of the original text node or created with generated content, will be the target.

More Information

Browser Support

Things to note:

  • For Internet Explorer 8 and down, you need to use a single colon :first-letter instead of the double-colon notation.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 5.5 All All
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag