Middle Child Pseudo-Class

Select only the middle using nth(child, of-type,)

This is the answer of my problem, I have solved myself !

.row:nth-child(n+4):nth-child(-n+6) .cell:nth-child(n+4):nth-child(-n+6){
background:red;
}

How to add certain CSS to middle elements?

A hacky way with only + selector and no need nth-* selectors and it can work with any contiguous set of elements with the same type.

You may have to adjust the different values used within pseudo elements depending on the situation:

div {  padding: 10px;  border: solid 2px;  border-radius: 10px;  display: inline-block;  position: relative;}
div + div:before,div + div:after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 8px; border: 2px solid; background: #fff;}
div + div:before { border-left: 0; right: calc(100% + 4px);}
div + div:after { border-right: 0; left: -2px;}
<div>1</div><div>2</div><div>3</div><div>4</div><span>--</span>
<div>1</div><div>2</div><div>3</div><div>4</div>
<span>--</span>
<div>1</div><div>2</div>
<span>---</span>
<div>1</div>

CSS select all child elements except first two and last two

You don't even need :not(). :nth-child(n+3):nth-last-child(n+3) works fine.

Check it out here.

nth-child CSS - matching 2nd, 5th, 8th, ... elements

This should work:

:nth-child(3n+2) {
// your css rules here
}

Basically, the 3n means "every third" while +2 means "starting with number two".

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

CSS how to use pseudo-class :not with :nth-child

:not(:nth-child(4n)) will get you anything that isn't :nth-child(4n), i.e. anything that isn't the 4th, 8th and so on. It won't exclude the 2nd child because 2 isn't a multiple of 4.

To exclude the 2nd and 4th you need either one of:

  • td:not(:nth-child(2n)) if you have fewer than 6 columns, or

  • td:not(:nth-child(2)):not(:nth-child(4)) if you have at least 6 columns and only want to exclude the 2nd and 4th, and not every even column.

Demo

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 */ }


Related Topics



Leave a reply



Submit