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


Tags: css,css3,css-selectors

Problem :

Is is possible to use :not() with nth-child ?

I tried sth like this without any luck :

td:not(:nth-child(4n)){
  text-align:center;
}

However this seems to work :

td:not(:first-child){
  text-align:center;
}

What I am trying is to center align all table columns except 2nd and 4th column. The columns are dynamically generated to add a custom class to these column .



Solution :

: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


    CSS Howto..

    Why the jaggedness at the end? How to fix the CSS style

    How to make a “wrappanel” in html?

    how to change css content attribute of a list item

    How do you deploy a project using Less CSS to Heroku?

    How to use jQuery to detect loaded background image after inserting out CSS

    how to set css position absolute in hover state

    How to add the footer with social icons in bootstrap?

    How to change iframe pages without the parent page changing with external links using CSS

    How to set a External SVG color in HTML using CSS?

    How to use non-online images in CSS?

    How to add Active states and icons in wordpress wp_nav_menu()

    How can I pipe the output from gulp-w3c-css to the console

    How to horizontally repeat two different bg gradients to the entire page width?

    How to validate HTML/CSS running in localhost?

    How To Vertically Align Text On A Squarespace Button?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    how to accomplish this border effect in css?

    Pure CSS Slideshow with animation delay fadein fadeout effects

    Dialogs are showing at the bottom of the page

    How Float divs like twitter?

    How to center a group of images in HTML/CSS?

    How to create dynamic table 4 columns per row using GridView?

    How to have only one page in a rails project be linked to a certain stylesheet?

    How to resolve css incompabilities/differences between different versions of IE?

    How to remove space between two buttons in a table row or “column”?

    Resize the content of a div based on how many objects are in the div

    How do I create a region/zone map for the web? [closed]

    Show button after login

    How i can change a css of an input[“file”]? [closed]

    How to style the