Why Does .Class:Last-Of-Type Not Work as I Expect

Why does .class:last-of-type not work as I expect?

Your issue is that you're reading :last-of-type and thinking it works as a :last-of-class selector, when instead it specifically means elements only. There is no selector for the last instance of a class, unfortunately.

From the W3C:

The :last-of-type pseudo-class represents an element that is the last sibling of its type.

You have p.visible:last-of-type as your selector, which does the following:

1. looks at each list of elements (e.g. 1 or more elements; a child with no siblings can still have :last-of-type applied to it) within each containing element in your HTML
2. finds the last element in that list
3. checks to see if it is a <p> element
4. checks to see if it has the class .visible on it.

In short, your selector will only apply its styles to a <p> that also has the class .visible on it. In your markup, only the first two <p> elements have that class; the third does not.

Here's a demo of different styles to illustrate:

p:last-of-type {  /* this will be applied in the third paragraph because the pseudo-selector checks for nodes only */  color: green;}p.visible:last-of-type {  /* this does not get applied, because you are using the pseudo-selector with a specific class in addition to the node type. */  color: red;}

<p class="visible">First paragraph.</p><p class="visible">Second paragraph.</p><p>Third paragraph.</p>

last-of-type selector not working as expected

Instead of <div>s and <label>s use <fieldset>s and <legend>s because:

• It makes your <form> semantically perfect.
• It looks better
• Using CSS as the main means of finding elements in the DOM is very limiting, so having <div>s and <span>s everywhere will lessen your chances at getting specific selectors.

Now your layout is semantic, and using nth-of-type is a no brainer:

Demo

fieldset:last-of-type {
  margin-bottom: 50px;
  border-color: red
}

<form role="form" method="POST" action="{{ route('login') }}">
  {{ csrf_field() }}
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>

  <div class="buttonWrapper">
    <button type="submit">Login</button>
  </div>
  <div style="padding-bottom: 20px;" class="text-center">
    <a class="text-uppercase text-condensed" href="">
              Forgot Your Password?
          </a>
  </div>
</form>

:last-of-type doesn't work

:last-of-type matches an element which is the last element of its type (tag) within its (first-level) parent, period. It doesn't know or care about what other selectors you may have combined, including class selectors such as .item-input, or anything else.

There is no straightforward way in CSS to accomplish what you want, which could be expressed as :last-of-selector. Some alternatives that have been suggested include

1. Wrap the first four elements in a separate div, so you can do :last-of-type within it.

2. Have somebody (server, local JS) mark the element you want with a specific class, and refer to it.

3. Other hacks, such as hard-wiring the number of extra elements at the end that you want to skip, and use :nth-last-of-type.

4. Give the elements in question a different tag, if you can so manage, and then you can use last-of-type.

Last-child not working with classes. Last-of-type also not working

Use nth-of-type and nth-last-of-type.

.post:nth-of-type(1) .entry-content { 
    background-color: red; 
    border-bottom: 0px solid;
}

.post:nth-last-of-type(2) .entry-content { 
    background-color: yellow; 
    border-bottom: 0px solid;
}

first-child and last-child, are, like the name suggests, for operating on children, so you'd want to use #content:last-child to find last element (not necessarily .post though).

Codepen

Last child / last of type not working on div

It's because the last child of .blue-back is always the current item. You need to do:

.col-md-4:last-child .blue-back {
    background-color:red;
}

See a CodePen demo here: https://codepen.io/ryan_pixelers/pen/KKKXBaz

:last-of-type Pseudo-Class Not Acting as Expected

The :nth-of-type() family of pseudo-classes only look at an element's type, that is, its tag name. They do not filter by your class selector or any other selector.

Therefore, your statements:

I'm applying :last-of-type to an element that is clearly as such. Check out the final div.info

Are contradictory. There's a div.center after that, making that the last div, not your div.info.

You cannot currently use CSS selectors to find your last div.info; you'll have to resort to adding an extra class and/or using JavaScript.

How to select the last of the class

You can do something like this:

Source: last

$(document).ready(function(){
  $(".selected:last").css("background-color", "yellow");
 });

OR

another way of using it:

$(document).ready(function(){  
  $( ".selected" ).last().css({ backgroundColor: "yellow", fontWeight: 
  "bolder" });
});

UPDATE-1

here is why the utopian-selector will not work in you case.

check this example:

.selected:last-of-type {  background: hotpink;}

<ul>  <li class="selected">un</li>  <li class="selected">deux</li>  <li class="selected"> ---- I want select that one ----- </li></ul>

Last-of-type selector works, while first-of-type doesn't?

It is important to know that :first-of-type, :last-of-type, etc don't really apply to classes, but rather to the element type they're attached to, li in this case.

It can be a bit confusing in the beginning, and sometimes if you follow good markup practices you may not even notice the difference since the elements are properly isolated, but it doesn't work like you'd expect from :first-of-class (which doesn't exist).

There are some ways around it, but none are perfect. My favorite answer is this one. Pretty well written and explained.

:last-child not working as expected?

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */  font-weight: bold;}
.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/  background: crimson;}
.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/  color: beige;}

<div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child-2'>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <p>Child w/o class</p></div>

CSS :last-of-type pseudo-class right after :not

Short answer: what you're looking for is :last-of-class, which doesn't exist (quite yet).

The :last-of-type pseudo-class is based on :nth-child, which iterates through all children in a container and selects specific children by index. However, :last-of-type also takes into account the element's type, i.e. the HTML tag name (div, span, etc.).

None of these pseudo-classes, however, take into account any other part of your CSS selector. Class names, attribute selectors, etc., are not taken into account by :nth-child nor :last-of-type. For instance: you can select the last li within a container, but you cannot select the last thing of class "test".

li:last-of-type {
  /* this matches on the last `li` in the list */
  color: red;
}

li.test:last-of-type {
  /* this doesn't match because it needs to be _both_:
   * the last `li` in the list AND of class "test". */
  color: blue;
}

<ul>
  <li class="test">foo</li>
  <li>bar</li>
</ul>

---

Related Topics