:Last-Child Not Working as Expected

: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>

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 child not working as expected with p tag

p.info:last-child matches all p.info elements that are also the last children of their parent.

In your markup, p.header are not the last children of their parent so while p.header matches various elements, p.header:last-child will match none.

Unfortunately, there is no :last-of-its-class selector. Matching is not possible unless you make some assumptions about the HTML structure. I made one:

p.header:nth-last-child(2) { }

It matches all p.header elements that are second last children of their parent. Note that this requires CSS3 selectors support.

p { background: #CCC; }p.info:last-child { background: #FC0; }p.header:nth-last-child(2) { background: #FC6; }

<div class="port-container">  <div class="header"><h1>Portfolio</h1></div>  <p class="header" ref="who">Who am I?</p>  <p class="info" ref="who">...</p>  <p class="header" ref="what">What do I do?</p>  <p class="info" ref="what">...</p>  <p class="header" ref="projects">Current Projects?</p>  <p class="info" ref="projects">...</p>  <p class="header" ref="conntact">Contact me</p>  <p class="info" ref="conntact">...</p></div>

CSS selector form:last-child doesn't work

This works just fine when you create a proper HTML file, the reason it doesn't work in your fiddle is because some online tools add some scripts just before the body element closing tags, thus the form you are expecting to have the styling, is not in fact the body's last-child.

To see it working on your fiddle just wrap the forms in a div container and you should see it as expected:

<body>
  <div>
    <form>
      <p>First Form</p>
    </form>
    <form>
      <p>Second Form</p>
    </form>
  </div>
</body>

you can refer to this question for more info.

css3 last-child not working as expected

The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.

You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.

Change

<li style="">VS</li>

<li class="vs">VS</li>

And use this instead of your current :last-child selector:

.match ul:last-child li.vs {
    display: none;
}

:first-child and :last-child selector not working in form

The definition of :first-child selector as per MDN is below:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

However, in your case, the .col-sm-1 divs are not the first or last element of their parent. They are 2nd and 4th child of .form-group respectively. This is why the styles are not being applied to .col-sm-1 in your code.

You can use nth-child property to target the .col-sm-1 elements in CSS as below:

#addUserTaskForm .form-group div.col-sm-1{
    width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
    margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
    margin-left:35%;
}

JSFiddle: https://jsfiddle.net/hchw6Ljm/2/

CSS :last-child:not(:only-child) not working as expected

If your td contains more than just p elements (I can't tell because you haven't shown your markup), you probably want to use :last-of-type and :only-of-type instead:

.form .mid td p:last-of-type:not(:only-of-type) {
    margin-bottom: 0; 
}