Loading...

AtoZ CSS Screencast: nth-child and nth-of-type in HTML

View: 542    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

:nth-child is a pseudo class used to select elements by a numeric expression.

The syntax is quite different to most other aspects of CSS and can be a bit tricky to get your head around, to begin with.

In this episode we’ll look at:

  • the various ways of using :nth-child,
  • the slightly more flexible :nth-of-type selector
  • and their counterparts selectors :nth-last-child and :nth-last-of-type.

:nth-child

:nth-child selects child elements if their position in the document matches a pattern described by an algebraic expression.

The :nth-child selector looks a bit like this:

li:nth-child(expression); {}

The “expression” can either be the keywords even or odd, a whole number or a formula in the pattern of an+b where a andb are whole numbers – positive or negative.

As :nth-child can be used to select a range of different elements under different circumstances, it’s difficult to explain how it works and what it’s for. Let’s look at a series of examples to illustrate its uses.

I have an unordered list, with 12 list items. Let’s see how we can use :nth-child to match a specific item or pattern of items:

<ul> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li>  
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
  <li>lorem ipsum</li> 
</ul>

To select the third list-item, I could use li:nth-child(3).

To select all the even items, I can use even keyword. Conversely, I can use :nth-child(odd) to select all the odd numbered items. These are commonly used selectors to stripe the background colour of alternate rows in a table of data.

To select every third item, I can use li:nth-child(3n).

To select the first 4 items, I can use li:nth-child(-n+4). To select everything except the first 4 items, I can use li:nth-child(n+5).

The an+b expression

We’ve seen how :nth-child(odd) can select all the odd numbered items in a list. An alternative approach to using the oddkeyword is to use the expression 2n+1.

But how does the expression work?

When the expression, in the format an+b contains non-zero values for a and b, the child elements are split into groups of aelements.

If the expression was 2n+1, the child elements would be split into groups of 2. Each element in the group is then given an index, starting at 1. The matched element in each group is bth index. In this example, that would be the first element.

If the expression was 3n+2, the list items would be grouped into sets of 3 and the second item in each group would be matched.

If the value of b is negative, the matched element in the group is the bth index but counted backwards from index 1. In this instance, the matched element from a group will no longer match an element in that group, but in one above it.

The even keyword can be expressed as 2n. In this case, there is no value for b in the an+b expression so each ath element is matched instead; 2n would match every second element, 3n every third, 4n every fourth an so on.

I personally find this idea of splitting child elements into groups and working out the matched index for each group very confusing – although that is how the CSS selectors spec describes it.

I can cope with the idea of matching every nth element – every 2nd or 3rd or 4th etc. and then I like to think as the second part of the expression as an offset.

In the case of 2n+1 I would read it as follows: “Find every second element, move the selection down by 1.”

If the expression was 3n-5 it would read: “Find every third element and move the selection up by 5.”

Other :nth-child selectors

:nth-child has a corresponding :nth-last-child pseudo class which works in the same way as :nth-child but in reverse.

li:nth-last-child(3n) starts at the last child element and works backwards, matching every third element from the bottom of the list. This is far less common and something I don’t think I’ve ever used in a production site before.

It is however, very common to select either the first or last child element. This could be done with :nth-child(1) or :nth-last-child(1) but is so common, there are :first-child and :last-child pseudo classes available as well. :first-child is the only one of this family of child selectors that works in IE8 – :last-child and any of the :nth selectors do not.

:nth-of-type

Something that often catches me out with :nth-child is that the selector just matches based on index of child elements and doesn’t take the type of element into account.

Let’s look at the following markup for a snippet of content.

<section> 
  <h1>lorem ipsum;</h1> 
  <p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p> 
  <p>Nunc sed turpis. Donec posuere vulputate arcu;</p> 
</section>

I have a section with a heading and sub-heading and a series of paragraphs beneath. I want to make the first paragraph stand out a bit by increasing the font-size to 1.5em.

I might try section p:first-child, as I want to style the first paragraph in the section. But this doesn’t work as the first child of the section is actually a h1 element. In this case, I need to use the :first-of-type selector.

There are a series of these type selectors; :first-of-type:last-of-type:nth-of-type and :nth-last-of-type. These behave the same way as :nth child but match the nth instances of a certain type of element.

These selectors are complex but very powerful. The browser support is IE9+ with the exception of :first-child which is IE8+. Bear this in mind when using them, but they’ve certainly gotten me out of a few difficult situations in the past.

AtoZ CSS Screencast: nth-child and nth-of-type in HTML

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Posted on 08-10-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 18    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 22    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 30    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 22    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 18    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 259    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 212    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd