Complex Selectors - Part7

Pseudo-classes Overview

Example	Classification	Explanation
a:link	Link Pseudo-class	Selects a link that has not been visited by a user
a:visited	Link Pseudo-class	Selects a link that has been visited by a user
a:hover	Action Pseudo-class	Selects an element when a user has hovered their cursor over it
a:active	Action Pseudo-class	Selects an element when a user has engaged it
a:focus	Action Pseudo-class	Selects an element when a user has made it their focus point
input:enabled	State Pseudo-class	Selects an element in the default enabled state
input:disabled	State Pseudo-class	Selects an element in the disabled state, by way of the disabled attribute
input:checked	State Pseudo-class	Selects a checkbox or radio button that has been checked
input:indeterminate	State Pseudo-class	Selects a checkbox or radio button that neither been checked or unchecked, leaving it in an indeterminate state
li:first-child	Structural Pseudo-class	Selects an element that is the first within a parent
li:last-child	Structural Pseudo-class	Selects an element that is the last within a parent
div:only-child	Structural Pseudo-class	Selects an element that is the only element within a parent
p:first-of-type	Structural Pseudo-class	Selects an element that is the first of it’s type within a parent
p:last-of-type	Structural Pseudo-class	Selects an element that is the last of it’s type within a parent
img:only-of-type	Structural Pseudo-class	Selects an element that is the only of it’s type within a parent
li:nth-child(2n+3)	Structural Pseudo-class	Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree
li:nth-last-child(3n+2)	Structural Pseudo-class	Selects an element that matches the given number or expression, counting all elements from the end of the document tree
p:nth-of-type(3n)	Structural Pseudo-class	Selects an element that matches the given number or expression, counting only elements of it’s type from the beginning of the document tree
p:nth-last-of-type(2n+1)	Structural Pseudo-class	Selects an element that matches the given number or expression, counting only elements of it’s type from the end of the document tree
section:target	Target Pseudo-class	Selects an element whose ID attribute value matches that of the URI fragment identifier
div:empty	Empty Pseudo-class	Selects an element that does not contain any children or text nodes
div:not(.awesome)	Negation Pseudo-class	Selects an element not represented by the stated argument

Pseudo-elements

Pseudo-elements are dynamic elements that don’t exist in the document tree, and when used within selectors thesepseudo-elements allow unique parts of the page to be stylized. One important point to note, only one pseudo-element may be used within a selector at a given time.

Textual Pseudo-elements

The first pseudo-elements ever released were the :first-letter and :first-line textual pseudo-elements. The:first-letter pseudo-element will identify the first letter of text within an element, while the :first-line pseudo-element will identify the first line of text within an element.

In the demonstration below the first letter of the paragraph with the class of alpha is set in a larger font size and colored orange, as is the first line of the paragraph with the class of bravo. These selections are made by use of the:first-letter and :first-line textual pseudo-elements respectively.

CSS

.alpha:first-letter,
.bravo:first-line {
  color: #dfa054;
  font-size: 18px;
}

HTML

<p class="alpha">Lorem ipsum dolor...</p>
<p class="bravo">Integer eget enim...</p>

Textual Pseudo-elements Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum dignissim leo a interdum. Duis eu orci velit. In urna quam, eleifend in pulvinar vitae, commodo vitae quam. Praesent vel magna nibh.

Integer eget enim pulvinar leo consectetur tincidunt ut sed erat. Etiam elit velit, molestie eu rutrum vel, vehicula feugiat augue. Vestibulum elementum dictum turpis ac blandit. Etiam ultricies enim vitae justo ultricies pulvinar. Donec porta, tortor ut suscipit fermentum.

Generated Content Pseudo-elements

The :before and :after generated content pseudo-elements create new inline level pseudo-elements just inside the selected element. Most commonly these pseudo-elements are used in conjunction with the content property to add insignificant information to a page, however that is not always the case. Additional uses of these psuedo-elements may be to add user interface components to the page without having to clutter the document with unsemantic elements.

The :before pseudo-element creates an pseudo-element before, or in front of, the selected element, while the :afterpseudo-element creates an pseudo-element after, or behind, the selected element. These pseudo-elements appear nested within the selected element, not outside of it. Below the :after pseudo-element is used to display the hrefattribute value of anchor links within parentheses after the actual links. The information here is helpful, but not ultimately necessary should a browser not support these pseudo-elements.

CSS

a:after {
  color: #8c9198;
  content: " (" attr(href) ")";
  font-size: 11px;
}

HTML

<a href="http://google.com/">Search the Web</a>
<a href="http://learn.shayhowe.com/">Learn How to Build Websites</a>

Textual Pseudo-elements Demo

• Search the Web
• Learn How to Build Websites

Fragment Pseudo-element

The ::selection fragment pseudo-element identifies part of the document that has been selected, or highlighted, by a user’s actions. The selection may then be stylized, however only using the color, background, background-color, and text-shadow properties. It is worth noting, the background-image property is ignore. While the shorthand background property may be used to add a color, any images will be ignored.

Single Colon (:) versus Double Colons (::)

The fragment pseudo-element was added with CSS3 and in attempt to differentiate pseudo-classes from pseudo-elements the double colons were added to pseudo-elements. Fortunately most browsers will support both values, single or double colons, for pseudo-elements however the ::selection pseudo-element must always start with double colons.

When selecting any of the text within the demonstration below the background will appear orange and any text shadows will be removed thanks to the ::selection fragment pseudo-element. Also note, the ::-moz-selectionMozilla prefixed fragment pseudo-element has been added to ensure the best support for all browsers.

::-moz-selection,
::selection {
  background: #dfa054;
  text-shadow: none;
}

Fragment Pseudo-element Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum dignissim leo a interdum. Duis eu orci velit. In urna quam, eleifend in pulvinar vitae, commodo vitae quam. Praesent vel magna nibh. Nullam lectus nibh, pellentesque ac convallis vulputate, ornare vel libero. Nulla vel tortor massa, non bibendum nisi. In at nisi a quam tempus porttitor.

Pseudo-elements Example

HTML

<a class="arrow" href="#">Continue Reading</a>

CSS

.arrow {
  background: #8ec63f;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  position: relative;
}
.arrow:before,
.arrow:after {
  content: "";
  height: 0;
  position: absolute;
  width: 0;
}
.arrow:before {
  border-bottom: 15px solid #8ec63f;
  border-left: 15px solid transparent;
  border-top: 15px solid #8ec63f;
  left: -15px;
}
.arrow:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid #8ec63f;
  border-top: 15px solid transparent;
  right: -15px;
}
.arrow:hover {
  background: #f7941d;
  color: #fff;
}
.arrow:hover:before {
  border-bottom: 15px solid #f7941d;
  border-top: 15px solid #f7941d;
}
.arrow:hover:after {
  border-left: 15px solid #f7941d;
}

Demo

Continue Reading

Pseudo-elements Overview

Example	Classification	Explanation
.alpha:first-letter	Textual Pseudo-elements	Selects the first letter of text within an element
.bravo:first-line	Textual Pseudo-elements	Selects the first line of text within an element
div:before	Generated Content	Creates a pseudo-element inside the selected element at the beginning
a:after	Generated Content	Creates a pseudo-element inside the selected element at the end
::selection	Fragment Pseudo-element	Selects the part of a document which has been selected, or highlighted, by a users actions

Selector Browser Support

While these selectors provide a variety of opportunity and the ability to do some truly amazing things with CSS, they are at times plagued by poor browser support. Before doing anything too critical check the selectors you are wishing to use across your visitors most common browsers, and then make the judgment call as to whether they are appropriate or not.

CSS3.info provides a CSS3 Selectors Test tool which will inform you as to which selectors are supported by the browser in use. It’s also never a bad idea to check browser support directly from the vendor.

Additionally, Selectivizr, a JavaScript utility, provides great support for these selectors in Internet Explorer 6-8. More support, should it be necessary, can also be provided by jQuery selectors.

Selector Speed & Performance

It is important to pay attention the speed and performance of selectors, as using too many intricate selectors can slow down the rendering of a page. Be attentive and when a selector begins to look a bit foreign think about revisiting it, and seeing if a better solution can be found.