CSS How to Use Pseudo-Class :Not with :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

Pseudo Class 'nth-child()' not working with ':hover

That's because the a isn't the 2nd child - it is an only child of it's parent li. What you are looking for is the a child of the 2nd li element. You can get that like this:

li:nth-child(2) a{ color: green; }

Then for the hover, either of these work with the code in your question. It depends on what you want to target with the hover:

// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }

/* OR */ 

/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }

Working Example (using different colours to show it working):

ul {
    background-color: white;
    text-decoration: none;
    padding: 0;
    margin: 0 auto;
}
ul li {
    margin: 0 2em;
    display: inline-block;
    padding: 0;
    list-style: none;
}
ul li a {
    text-decoration: none;
    color: black;
}

/* change colour of 2nd link */
li:nth-child(2) a{
    color: blue;
}

/* change colour of 2nd link on hover */
li:nth-child(2):hover a{
    color: green;
}

/* change colour of 3rd link on hover */
li:nth-child(3) a:hover{
    color: red;
}

<ul>
      <li><a href="#">Easy</a></li>
      <li><a href="#">Medium</a></li>
      <li><a href="#">Hard</a></li>
      <li><a href="#">Insane</a></li>
</ul>

CSS pseudo classes ordering :nth-child and :not

AFAIK, nth-child works on element positions or index. So, even if you hide the element, the other element positions/indexes doesn't change.

I think your better option here is to do this completely with jQuery as I shown below as just an example:

$(function () {
    $('.list li:not(.hidden):odd').addClass('paint');
    $('.hide_some').click(function () {
        $('.list li').eq(0).addClass('hidden');
        $('.list li').eq(2).addClass('hidden');
        $('.list li').eq(5).addClass('hidden');
        // again remove the paint
        $('.list li').removeClass('paint');
        // again add new paint
        $('.list li:not(".hidden"):odd').addClass('paint');
    })
})

Working Fiddle

Create pseudo elements, but exclude specific elements (with not:nth-child)

Are you trying to create a ::before pseudo-element for all but the third child?

If so, the :not() pseudo-class needs to come first, since pseudo-elements can only appear at the very end of a selector (and this is why the made-up term "pseudo-selector" is dangerous to use, because you can't group pseudo-classes and pseudo-elements into a single umbrella term given their syntactic differences):

.ctr > div div:not(:nth-child(3))::before

Since you're using CSS3 pseudo-classes anyway, pseudo-elements should be indicated with double colons to further cement the difference between the two.

See also: How to write :hover condition for a:before and a:after?

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

This is a very common problem that arises due to a misunderstanding of how :nth-child(An+B) and :nth-of-type() work.

In Selectors Level 3, the :nth-child() pseudo-class counts elements among all of their siblings under the same parent. It does not count only the siblings that match the rest of the selector.

Similarly, the :nth-of-type() pseudo-class counts siblings sharing the same element type, which refers to the tag name in HTML, and not the rest of the selector.

This also means that if all the children of the same parent are of the same element type, for example in the case of a table body whose only children are tr elements or a list element whose only children are li elements, then :nth-child() and :nth-of-type() will behave identically, i.e. for every value of An+B, :nth-child(An+B) and :nth-of-type(An+B) will match the same set of elements.

In fact, all simple selectors in a given compound selector, including pseudo-classes such as :nth-child() and :not(), work independently of one another, rather than looking at the subset of elements that are matched by the rest of the selector.

This also implies that there is no notion of order among simple selectors within each individual compound selector¹, which means for example the following two selectors are equivalent:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

Translated to English, they both mean:

Select any tr element that matches all of the following independent conditions:
it is an odd-numbered child of its parent;
it has the class "row"; and
it is a descendant of a table element that has the class "myClass".

^{(you'll notice my use of an unordered list here, just to drive the point home)}

Selectors level 4 seeks to rectify this limitation by allowing :nth-child(An+B of S)² to accept an arbitrary selector argument S, again due to how selectors operate independently of one another in a compound selector as dictated by the existing selector syntax. So in your case, it would look like this:

table.myClass tr:nth-child(odd of .row)

Of course, being a brand new proposal in a brand new specification, this probably won't see implementation until a few years down the road.

In the meantime, you'll have to use a script to filter elements and apply styles or extra class names accordingly. For example, the following is a common workaround using jQuery (assuming there is only one row group populated with tr elements within the table):

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

With the corresponding CSS:

table.myClass tr.row.odd {
  ...
}

If you're using automated testing tools such as Selenium or scraping HTML with tools like BeautifulSoup, many of these tools allow XPath as an alternative:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

Other solutions using different technologies are left as an exercise to the reader; this is just a brief, contrived example for illustration.

¹ _{If you specify a type or universal selector, it must come first. This does not change how selectors fundamentally work, however; it's nothing more than a syntactic quirk.}

² _{This was originally proposed as :nth-match(), however because it still counts an element relative only to its siblings, and not to every other element that matches the given selector, it has since as of 2014 been repurposed as an extension to the existing :nth-child() instead.}

do you know why css nth-child Pseudo class not work

Because your .grid-item__number are always first (and only) child.

Apply your n-th child rule to parent div, and then select .grid-item__number

body {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.grid-conteiner {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px;
  grid-auto-flow: column;
  gap: 20px;
}

.grid-item {
  border: 1px solid #fff;
  font-weight: 800;
  font-size: 100%;
  color: #fff;
  position: relative;
}

.grid-item__number {
  width: 33%;
  height: 38%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100%;
}

.grid-item:nth-child(3n + 1) {
  background-color: #acd900;
}

.grid-item:nth-child(3n + 1) .grid-item__number {
  background-color: red;
}

.grid-item:nth-child(3n + 2) {
  background-color: #70bc04;
}

.grid-item:nth-child(3n + 2) .grid-item__number {
  background-color: blue;
}

.grid-item:nth-child(3n + 3) {
  background-color: #258300;
}

.grid-item:nth-child(3n + 3) .grid-item__number {
  background-color: yellow;
}

    <div class="grid-conteiner">
      <div class="grid-item"><span class="grid-item__number">1</span></div>
      <div class="grid-item"><span class="grid-item__number">2</span></div>
      <div class="grid-item"><span class="grid-item__number">3</span></div>
      <div class="grid-item"><span class="grid-item__number">4</span></div>
      <div class="grid-item"><span class="grid-item__number">5</span></div>
      <div class="grid-item"><span class="grid-item__number">6</span></div>
    </div>

not of nth child selector not working in sass

You can achieve this doing by all the items bg blue and the first one's bg to white or whatever your background is.

<div class="list">
<div *ngFor="let item of data; let i=index"  [class.first]="i === 0">
    <input class="radio" name="radio" type="radio" />
<label for="radio1" class="lbl">{{item.name}}</label>

and your css should be like this:

label {
  background-color:blue;
}
.first label {
  background-color: #fff;
}

I assume your data is like that:

 data = [
    {name: "car"},
    {name: "truck"},
    {name: "bike"}
  ]

This is working example

Add pseudo class to nth-child with CSS

Your selector is incorrect. .card:hover div:nth-child(odd) is selecting odd-indexed divs that are decendants of a .card, but your structure suggests that these should be the same thing. Adjust your selector to match the odd elements on hover:

.card {  margin: 30px;  padding: 20px 40px 40px;  max-width: 500px;  text-align: left;  background: #fff;  border-bottom: 4px solid #ccc;  border-radius: 6px;}
.card:hover {  border-color: #75dcff;}
.card:nth-child(odd):hover {  border-color: #ff7c5e;}

<div class="card"></div><div class="card"></div><div class="card"></div>

Why is CSS selector 'table tr:not(tr:nth-child(even))' throwing a TypeError?

While this selector does not (throws a TypeError):
document.querySelectorAll('table tr:not(tr:nth-child(even))');

:not() only takes a “simple selector”, and tr:nth-child(even) isn’t one.

https://drafts.csswg.org/selectors-3/#simple-selectors-dfn:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Either is the important keyword here. Only one of those selector types is allowed, not combinations of them.

Why is this nth-child pseudo selector not working in the following table?

I know that @Musa teased out a solution to this problem, but I will add to that just to document in case others run into this issue.

As of right now you can't segment sections of siblings via classes AND use :nth-child().

    //Standard Use:
    ul li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

    // Attempted Use:
    ul li.scope:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li class="scope">One</li>
        <li class="scope">Two</li> <!-- Fails -->
        <li class="scope">Thre</li>
    </ul>

    // Optional Solution:
    ul.scope li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

    <ul class="scope">
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

It appears that in order for the nth-child pseudo class to activate, it requires direct access to the element itself and not one of it's nodes. So for now the primary work around is to re-factor and take your scope up one level (or higher).

CSS How to Use Pseudo-Class :Not with :Nth-Child