How to Correctly Select the First or the Last Child With Css

How can select first child/last child of class in a mixed container?

Use nth-child or nth-of-type in combination with the class selector.

Live Example

.main .black:nth-child(2n) {
    color: yellow;
}

Or if you want them to be separate

This demo

.main .black:nth-child(5n - 6) {
    color: yellow;
}
.main .black:nth-child(5n - 4) {
    color:purple;
}

The function calculates using n = element of type, so :nth-child(n) would select every element, :nth-child(2n) selects all odd elements, :nth-child(2n-1) selects all even elements, and so on. You simply have to come up with a function that gets you the elements you want

Another option may be to add another class to the first and/or last element of class

You can select the first child with a dynamic number of elements with the class by combining two selectors like Jonathan said (I prefer div:not(.black) + div.black personally). However, the only way to select the last element with a class with a dynamic number of elements given there is no previous sibling selector is to use Javascript or a library like jQuery as follows:

Javascript

var blackElems = document.getElementsByClassName('black');
blackElems[blackElems.length - 1].style.color = 'purple';

jQuery

$('.main .black:last').css({ 'color' : 'purple' });

How can I select the last element with a specific class, not last child inside of parent?

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

How can I select all children of an element except the last child?

You can use the negation pseudo-class :not() against the :last-child pseudo-class. Being introduced CSS Selectors Level 3, it doesn't work in IE8 or below:

:not(:last-child) { /* styles */ }

how to select last-child or first-child elements just in parent? (css - html)

Change ul li:last-child to nav > ul > li:last-child.

The > character is the direct-descendent selector.

How can I select the element prior to a last child?

You can use :nth-last-child(); in fact, besides :nth-last-of-type() I don't know what else you could use. I'm not sure what you mean by "dynamic", but if you mean whether the style applies to the new second last child when more children are added to the list, yes it will. Interactive fiddle.

ul li:nth-last-child(2)

CSS first and last child elements

/* CSS used here will be applied after bootstrap.css */
.container {  width: 100%;  padding 25px 40px;}.container > .btn {  min-width: 35%;}.btn:first-child {  float: left;}.btn:last-child {  float: right;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div class="container">  <button type="button" class="btn btn-default">On</button>  <button type="button" class="btn btn-default">Off</button></div>

Select :first-child or :last-child that doesn't contain some specific class

As mentioned, this is not possible with CSS selectors. The reason is twofold:

:first-child and :last-child represent the first and last children of their parents, period. They do not represent the first and last child elements matching the rest of the selector. Chaining :not(.hide) simply tells the selector to ignore the element if it has the .hide class; it does not change the meaning of the rest of the selector.
There is currently no other pseudo-class available for the first or last (or nth) element matching an arbitrary selector.

Since you're already using jQuery to apply the .hide class, you can use it to apply another class to the first and last elements matching :not(.hide), then target those additional classes in your CSS.

nth-child first and last both being applied to element

This can be done however you need to select the first and last child of the link. If you are going inside of the link and selecting the first and last child of an element that there is only one, your required styling will not be able to work. If you select the first and last a tag, you'll get the desired outcome:

.row a:first-child .one-third {  padding-left: 0;}
.row a:last-child .one-third {  padding-right: 0;}

<div class="row">  <a href="#">    <div class="one-third column">content</div>  </a>  <a href="#">    <div class="one-third column">content</div>  </a>  <a href="#">    <div class="one-third column">content</div>  </a></div>

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
    background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.