InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS selectors

    Simple Selectors

    • type selectors
    • universal selector (*)
    • attribute presence and value selectors
    • attribute substring selectors
    • class selectors
    • two classes (.c1.c2)
    • id selectors

    Pseudo-classes

    • :link
    • :visited
    • :hover
    • :active
    • :focus
    • :target
    • :lang
    • :enabled and :disabled
    • :checked
    • :root
    • :nth-child
    • :nth-of-type
    • :nth-child vs :nth-of-type
    • :nth-last-child
    • :nth-last-of-type
    • :first-child
    • :first-of-type
    • :last-child
    • :last-of-type
    • :only-child
    • :only-of-type
    • :empty
    • :not

    Pseudo-elements

    • ::first-line
    • ::first-letter
    • ::before and ::after
    • ::placeholder

    Combinators

    • child vs descendant selector
    • adjacent sibling selector (E1 + E2)
    • general sibling selector (E1 ~ E2)

    Specificity

    • Selector specificity
     
    • Home
    • > Tutorials
    • > CSS
    • > CSS selectors

    Css :last-of-type selector – last child element of type

    By admin on Jan 25, 2016

    Css :last-of-type pseudo class apply to an element if it is last sibling among its parent’s direct child elements of same type. Here is an example.

    :last-of-type basic example

    <style type="text/css" media="screen">
    .foo > p:last-of-type {
      background-color:lightgreen;
    }
    </style>
    <div class="foo">
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
      <div>div1</div>
    </div>
    refresh done
    try it online

    Few points to note:

    1. Here the :last-of-type pseudo class style applies to all p direct child elements of div of class foo.
    2. To apply style to all direct child and descendant p elements we could have used .foo p:last-of-type. See more info at CSS direct child vs any descendant selector.

    :last-of-type – include nested child elements example

    This example contains two p elements which fulfil last-of-type requirements.

    <style type="text/css" media="screen">
    .foo p:last-of-type {
      background-color:lightgreen;
    }
    </style>
    <div class="foo">
      <p>p1</p>
      <p>p2</p>
      <div><p>in_div_p1</p><p>in_div_p2</p></div>
      <p>p3</p>
    </div>
    refresh done
    try it online

    :last-of-type – exclude nested child elements example

    This example contains two p elements which fulfil last-of-type requirements. But since we are using .foo > p, only direct p child elements are eligible for this style.

    <style type="text/css" media="screen">
    .foo > p:last-of-type {
      background-color:lightgreen;
    }
    </style>
    <div class="foo">
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
      <div><p>in_div_p1</p><p>in_div_p2</p></div>
    </div>
    refresh done
    try it online

    Suggested posts:

    1. Css :first-of-type selector – first child element of type
    2. Css :last-child selector – last child element
    3. Css :first-child selector – first child element
    4. Css :nth-child vs :nth-of-type
    5. CSS – child vs descendant selector examples
    6. CSS :only-of-type – define style of only child a type
    7. CSS – :nth child, :nth-last-child, :first-child, :last-child pseudo classes examples
    8. CSS :only-child – define style if element if only child
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS Pseudo Classes, CSS selectors, CSS3, Tutorials

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress