Complex Selectors - Part6

:nth-of-type(n) & :nth-last-of-type(n)

The :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes are very similar to that of the :nth-child(n) and :nth-last-child(n) pseudo-classes, however instead of counting every element within a parent the:nth-of-type(n) and :nth-last-of-type(n) pseudo-classes only count elements of their own type. For example, when counting paragraphs within an article, the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes will skip any headings, divisions, or miscellaneous elements that are not paragraphs, while the :nth-child(n)and :nth-last-child(n) would count every element, no matter it’s type, only selecting the ones that match the element within the stated selector. Additionally, all of the same expression possibilities used within the :nth-child(n)and :nth-last-child(n) pseudo-classes are also available within the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes.

Using the :nth-of-type(n) pseudo-class within the p:nth-of-type(3n) selector we are able to identify every third paragraph within a parent, regardless of other sibling elements within the parent. Here the paragraphs on lines 5 and 9 are selected, thus marked bold.

CSS

STRUCTURAL & POSITION PSEUDO-CLASSESp:nth-of-type(3n) {...}

HTML

STRUCTURAL & POSITION PSEUDO-CLASSES<article>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

As with the :nth-child(n) and :nth-last-child(n) pseudo-classes, the primary difference between the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes is that the :nth-of-type(n) pseudo-class counts elements from the beginning of the document tree and the :nth-last-of-type(n) pseudo-class counts elements from the end of the document tree.

Using the :nth-last-of-type(n) pseudo-class we can write the p:nth-last-of-type(2n+1) selector which identifies every second paragraph from the end of a parent element starting with the last paragraph. Here the paragraphs on lines 4, 7, and 9 are selected, thus marked bold.

CSS

STRUCTURAL & POSITION PSEUDO-CLASSESp:nth-last-of-type(2n+1) {...}

HTML

STRUCTURAL & POSITION PSEUDO-CLASSES<article>
  <h1>...</h1>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</article>

Target Pseudo-class

The :target pseudo-class is used to style elements when an element’s ID attribute value matches that of the URI fragment identifier. The fragment identifier within a URI can be recognized by the hash character, #, and what directly follows it. The URL http://example.com/index.html#hello includes the fragment identifier of hello. When this identifier matches the ID attribute value of an element on the page, <section id="hello"> for example, that element may be identified and stylized using the :target pseudo-class. Fragment identifiers are most commonly seen when using on page links, or linking to another part of the same page.

Looking at the code below, if a user would visit a page with the URI fragment identifier of #hello the section with that same ID attribute value would be stylized accordingly using the :target pseudo-class. If the URI fragment identifier changes, and matches the ID attribute value of another section, that new section may be stylized using the same selector and pseudo-class from before.

CSS

section:target {...}

HTML

<section id="hello">...</section>

Empty Pseudo-class

The :empty pseudo-class allows elements that do not contain children or text nodes to be selected. Comments, processing instructions, and empty text nodes are not considered children and are not treated as such.

Using the div:empty pseudo-class will identify divisions without any children or text nodes. Below the divisions on lines 2 and 3 are selected, and marked bold, as they are completely empty. Even though the second division contains a comment it is not considered to be a child, thus leaving the division empty. The first division contains text, the third division contains one blank text space, and the last division contains a strong child element, thus they are all ruled out and are not selected.

CSS

div:empty {...}

HTML

<div>Hello</div>
<div><!-- Coming soon. --></div>
<div></div>
<div> </div>
<div><strong></strong></div>

Negation Pseudo-class

The negation pseudo-class, :not(x), is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro) selector uses the negation pseudo-class to identify every paragraph element without the class of intro. The paragraph element is identified at the beginning of the selector followed by the :not(x)pseudo-class. Inside of the parentheses falls the negation selector, the class of .intro in this case.

Below both the div:not(.awesome) and :not(div) selectors use the :not(x) pseudo-class. Thediv:not(.awesome) selector identifies any division without the class of awesome, while the :not(div) selector identifies any element that isn’t a division. As a result the division on line 1 is selected as well as the two sections on lines 3 and 4, thus they are marked bold. The only element not selected is the division with the class of awesome, as it falls outside of the two negation pseudo-classes.

CSS

div:not(.awesome) {...}
:not(div) {...}

HTML

<div>...</div>
<div class="awesome">...</div>
<section>...</section>
<section class="awesome">...</section>

Pseudo-classes Example

HTML

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Player</th>
      <th>Position</th>
      <th>Height</th>
      <th>Weight</th>
      <th>Birthday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8</td>
      <td>Marco Belinelli</td>
      <td>G</td>
      <td>6-5</td>
      <td>195</td>
      <td>03/25/1986</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Carlos Boozer</td>
      <td>F</td>
      <td>6-9</td>
      <td>266</td>
      <td>11/20/1981</td>
    </tr>
    <tr>
      <td>21</td>
      <td>Jimmy Butler</td>
      <td>G-F</td>
      <td>6-7</td>
      <td>220</td>
      <td>09/14/1989</td>
    </tr>
    ...
  </tbody>
</table>

CSS

table {
  border-spacing: 0;
  width: 100%;
}
th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 8px;
  text-align: left;
  text-transform: uppercase;
}
th:first-child {
  border-top-left-radius: 4px;
  border-left: 0;
}
th:last-child {
  border-top-right-radius: 4px;
  border-right: 0;
}
td {
  border-right: 1px solid #c6c9cc;
  border-bottom: 1px solid #c6c9cc;
  padding: 8px;
}
td:first-child {
  border-left: 1px solid #c6c9cc;
}
tr:first-child td {
  border-top: 0;
}
tr:nth-child(even) td {
  background: #e8eae9;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

Demo

NUMBER	PLAYER	POSITION	HEIGHT	WEIGHT	BIRTHDAY
8	Marco Belinelli	G	6-5	195	03/25/1986
5	Carlos Boozer	F	6-9	266	11/20/1981
21	Jimmy Butler	G-F	6-7	220	09/14/1989
9	Luol Deng	F	6-9	220	04/16/1985
22	Taj Gibson	F	6-9	225	06/24/1985
32	Richard Hamilton	G	6-7	193	02/14/1978
12	Kirk Hinrich	G	6-4	190	01/02/1981
48	Nazr Mohammed	C	6-10	250	09/05/1977
13	Joakim Noah	C	6-11	232	02/25/1985
77	Vladimir Radmanovic	F	6-10	235	11/19/1980
2	Nate Robinson	G	5-9	180	05/31/1984
1	Derrick Rose	G	6-3	190	10/04/1988
25	Marquis Teague	G	6-2	190	02/28/1993