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

    how to make an empty span collapse

    How can I create button using pure CSS which involves linear gradients and background color

    How to position many DIVs in CSS

    how to overide css class with an underlying class

    CSS: How to get a button to always be to the left of another button that's in a corner?

    How can I refresh CSS caching?

    show css icon with select icon class selcetbox

    IcoMoon App icon fonts are shown as 

    How to make CSS color transition time correctly with transform perspective?

    div height is not showing properly

    How do I get a value from the style element?

    How to apply default CSS styling to all HTML pages

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to avoid an unknown height sticky footer to overlap content with CSS only?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    Show background image if container content is small (responsive)

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How to prevent CSS in dynamically added HTML content from overriding my JSP's CSS content?

    in slick slideshow, just want center slide to be active

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    CSS stacking order - how to get this right?

    how to load different css files with different screen sizes?

    How to embed fonts in CSS?

    how to change the colour property of tag used for a text

    How to locate the element within CSS using javascript

    How to make transition effect on css sprite hover

    How to use two JavaScript (.js) files on one website?

    CSS: how to refer to second child class of a div

    How can I move text to the left with CSS?

    How to emulate Google's thick, red underline text decoration