[CSS] Selectors (5) – Structural Pseudo-Classes

CSS pseudo-classes are quite confusing. But with careful use, you can make your web page much nicer and easy to read. This post focuses on the structural pseduo-classes.

 

1. Pseudo-Classes

The pseudo-classes do not work independently. It requires selectors to be used. It applies additional selection logic to the specfied selector.

Structural pseudo-classes are used to select the elements by the structure (parent-child / the order of the occurrence) of the document.

The simplest ones are:

  • :root : selects the document’s root element
  • :empty : selects every element of a selector type if it has no children (including text nodes)

 

2. Selecting the First or the Last

Let’s start with the easy ones.

  • :first-child : selects every element of a selector type if it is the first child of its parent
  • :last-child :  … the last child of its parent
  • :first-of-type : selects every element of a selector type if it is the first occurrence of the type within the parent
  • :last-of-type : … the last occurrence of the type
<section id="counries">
  <div>Canada</div>
  <p>USA</p>
  <p>Mexico</p>
  <p>Cuba</p>
  <div>Argentina</div>
  <p>Chile</p>
  <p>Brazil</p>
</section>

You can select the child element in various ways:

#counries > div:first-child { color:Red; } /* Canada */
#counries > p:first-child { color:Green; } /* None */
#counries > p:last-child { color:Blue; } /* Brazil */
#counries > p:first-of-type { color:Orange } /* USA */
#counries > p:last-of-type { font-style:italic } /* Brazil */
#counries > div:last-of-type { font-size:2em; } /* Argentina */

 

3. Selecting the Specified Location

Rather than just selecting the first or the last match, you can select the element with the sequence number. The index starts from 1, which means that the first child is the index of 1.

  • :nth-child(#) : selects every element of a selector type if it is in the specified sequence within the parent
  • :nth-last-child(#) :
  • :nth-of-type(#) : selects every element of a selector type if it is the specified sequence of the type within the parent
  • :nth-last-of-type(#) :
<table id="colors">
  <tr><td>Black</td></tr>
  <tr><td>Red</td></tr>
  <tr><td>Green</td></tr>
  <tr><td>Blue</td></tr>
  <tr><td>White</td></tr>
</table>

You can select any table row you want.

table tr:nth-child(2) { color:Red; }
table tr:nth-child(3) { color:Green; }
table tr:nth-child(4) { color:Blue; }

Moreover, you are not restricted to provide the exact sequence number to use these pseudo-classes. What if you have 1000 table rows?

The formula “(an + b)” is a great way to specify multiple sequences in a single line.

  • a : represents a cycle size
  • n : is a counter (starts at 0)
  • b : is an offset value

For example, “3n + 4” is interpreted as “4, 7, 10, 13, …”. The most widely used formulas are “2n” (2, 4, 6, 8 …) and “2n+1” (1, 3, 5, 9 …). Because of their frequent uses, the keywords (“even” and “odd“) are assigned to them.

table tr:nth-child(even) { background-color: Gray; } /* nth-child(2n) */
table tr:nth-child(odd) { background-color: Blue; } /* nth-child(2n+1) */

 

4. Selecting Only Child

You can guess the meaning of the following pseudo-classes very easily.

  • : only-child : selects every element of a selector type if it is the only child of its parent
  • : only-of-type : selects every element of a selector type if it is only occurrence of the type within the parent

 

5. Selecting By Language

The “lang” attribute is used to specify the language of the text in the element.

  • :lang() : selects the matching language
<section id="colors">
  <p lang="en-us">Color</p>
  <p lang="en-ca">Colour</p>
  <p lang="fr-fr">Couleur</p>
</section>

You can use the attribute selector but the “:lang()” pseudo-class is more versatile. If you provide the “en”, it matches with all “en-xx” languages.

#colors p:lang(en) { color:Red; } /* Color, Colour */
#colors p:lang(fr) { color:Blue; } /* Couleur */
#colors p[lang="en"] { font-style:italic } /* No selection */
#colors p[lang="en-us"] { font-weight:bold } /* Color */

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s