Tuesday 17 September 2013

Complex Selectors - Part4

Pseudo-classes

Pseudo-classes are similar to regular classes in HTML however they are not directly stated within the markup, instead they are a dynamically populated as a result of users actions or the document structure. The most common pseudo-class, and one you’ve likely seen before, is :hover. Notice how this pseudo-class begins with the colon character, :, as will all other pseudo-classes.

Link Pseudo-classes

Some of the more basic pseudo-classes include two revolving around links specifically. The :link and :visitedpseudo-classes define if a link has or hasn’t been visited. To style an anchor which has not been visited the :linkpseudo-class comes into play, where the :visited pseudo-class styles links that a user has already visited based on their browsing history.
  1. a:link {...}
  2. a:visited {...}

User Action Pseudo-classes

Based on a users actions different pseudo-classes may be dynamically applied to an element, of which include the:hover:active, and :focus pseudo-classes. The :hover pseudo-class is applied to an element when a user moves their cursor over the element, most commonly used with anchor elements. The :active pseudo-class is applied to an element when a user engages an element, such as clicking on an element. Lastly, the :focus pseudo-class is applied to an element when a user has made an element the focus point of the page, often by using the keyboard to tab from one element to another.
  1. a:hover {...}
  2. a:active {...}
  3. a:focus {...}

User Interface State Pseudo-classes

As with the link pseudo-classes there are also some pseudo-classes generated around the user interface state of elements, particularly within form elements. These user interface element state pseudo-classes include :enabled,:disabled:checked, and :indeterminate.
The :enabled pseudo-class selects an input that is in the default state of enabled and available for use, where the:disabled pseudo-class selects an input that has the disabled attribute tied to it. Many browsers by default will fade out disabled inputs to inform users that the input is not available for interaction, however those styles may be adjusted as wished with the :disabled pseudo-class.
  1. input:enabled {...}
  2. input:disabled {...}
The last two user interface element state pseudo-classes of :checked and :inderterminate revolve around checkbox and radio button input elements. The :checked pseudo-class selects checkboxes or radio buttons that are, as you may expect, checked. When a checkbox or radio button has neither been selected or unselected it lives in an indeterminate state, from which the :indeterminate pseudo-class can be used to target these elements.
  1. input:checked {...}
  2. input:indeterminate {...}

Structural & Position Pseudo-classes

A handful of pseudo-classes are structural and position based, in which they are determined based off where elements reside in the document tree. These structural and position based pseudo-classes come in a few different shapes and sizes, each of which provides their own unique function. Some pseudo-classes have been around longer than others, however CSS3 brought way of an entire new set of pseudo-classes to supplement the existing ones.

:first-child, :last-child, & :only-child

The first structural and position based pseudo-classes one is likely to come across are the :first-child:last-child, and :only-child pseudo-classes. The :first-child pseudo-class will select an element if it’s the first child within its parent, while the :last-child pseudo-class will select an element if it’s the last element within its parent. These pseudo-classes are prefect for selecting the first or last items in a list and so forth. Additionally, the :only-childwill select an element if it is the only element within a parent. Alternately, the :only-child pseudo-class could be written as :first-child:last-child, however :only-child holds a lower specificity.
Here the selector li:first-child identifies the first list item within a list, while the selector li:last-childidentifies the last list item within a list, thus lines 2 and 10 are marked in bold. The selector div:only-child is looking for a division which is the single child of a parent element, without any other other siblings. In this case line 4 is marked in bold as it is the only division within the specific list item.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESli:first-child {...}
  2. li:last-child {...}
  3. div:only-child {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<ul>
  2. <li>...</li>
  3. <li>
  4. <div>...</div>
  5. </li>
  6. <li>
  7. <div>...</div>
  8. <div>...</div>
  9. </li>
  10. <li>...</li>
  11. </ul>

:first-of-type, :last-of-type, & :only-of-type

Finding the first, last, and only children of a parent is pretty helpful, and often all that is needed. However sometimes you only want to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. Fortunately this is where the:first-of-type:last-of-type, and :only-of-type pseudo-selectors come into place.
The :first-of-type pseudo-class will select the first element of it’s type within a parent, while the :last-of-typepseudo-class will select the last element of it’s type within a parent. The :only-of-type pseudo-class will select an element if it is the only of it’s type within a parent.
In the example below the p:first-of-type and p:last-of-type pseudo-classes select the first and last paragraphs within the article respectively, regardless if they are actually the first or last children within the article. Lines 3 and 6 are marked in bold to reflex these selections. The img:only-of-type selector identifies the image on line 5 as it is the only image to appear within the article, thus marked in bold as well.
CSS
  1. STRUCTURAL & POSITION PSEUDO-CLASSESp:first-of-type {...}
  2. p:last-of-type {...}
  3. img:only-of-type {...}
HTML
  1. STRUCTURAL & POSITION PSEUDO-CLASSES<article>
  2. <h1>...</h1>
  3. <p>...</p>
  4. <p>...</p>
  5. <img src="#">
  6. <p>...</p>
  7. <h6>...</h6>
  8. </article>
Lastly there are a few structural and position based pseudo-classes that select elements based on a number or an algebraic expression. These pseudo-classes include :nth-child(n):nth-last-child(n):nth-of-type(n), and :nth-last-of-type(n). All of these unique pseudo-classes are prefixed with nth and accept a number or expression inside of the parenthesis, indicated by the character n argument.
The number or expression that falls within the parenthesis determines exactly what element, or elements, are to be selected. Using a number outright will count individual elements from the beginning or end of the document tree and then select one element, while using an expression will count numerous elements from the beginning or end of the document tree and select them in groups or multiples.