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, ortd: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
Printing HTML Tables, Preventing Rows from Spanning Multiple Pages
Overflow:Hidden on Body Is Broken in iOS6
Css-Moving Text from Left to Right
How to Get Attribute Value Using Selenium and CSS
Different CSS Stylesheet for Routes
How to Set Animation on First Element on Loading
Reset Angle of Text in Skewed Div Using CSS
How to Custom Table Responsive Materialize
How to Target the Very Last List Element in CSS
Whitespace in Wrapped Form Element
Keeping A: Active Until Another Link Is Clicked
How to Compile an Existing Project Because Compass Can't Find It
Css: How to Adjust My Font Size Fill All the Space in a Justified Layout
How to Define Min-Margin and Max-Margin, Max-Padding and Min-Padding in CSS
Why Does Container Div Insist on Being Slightly Larger Than Img or Svg Content
Media Query for High Resolution Mobile 1080Px (Xperia Z etc)