CSS: Nth-Of-Type() and: Not() Selector

CSS :nth-of-type() and :not() selector?

The selector you have --

ul li:not(.year):nth-of-type(4n+1) { background: yellow; }

-- is perfectly correct (as shown by highlighting the selector).

The issue is with how you're using clear. It works if you use clear:right, and then clear:left on the following element:

ul li:not(.year):nth-of-type(4n+1) { clear: right;  }
ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

Edit per comments The stricken-out text is nonsense. The real issue, as per BoltClock's answer, is that the :not pseudo-class doesn't affect nth-of-type. Adjusting the selector offset works in this case by coincidence, but would not work if the :not pattern was different.

ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

http://jsfiddle.net/8MuCU/

Why is my nth-of-type selector not working?

You misunderstand how :nth-of-type() works.

Each .text-container you add is odd.

:nth-of-type() count refers to nth-of-type within any given context, which in your case is <div class="col-4">. Within those, each of your <div class="text-container"> is :first-of-type.

Here's what you probably need (all I changed is the CSS selectors):

$(document).ready(function() {  $('#button').click(function() {    $('.row').append('<div class="col-4"><div class="text-container"><h1 class="heading">Something</h1></div></div>');  });});

.row>div:nth-of-type(odd) .text-container {  background-color: green;  color: yellow;}
.row>div:nth-of-type(even) .text-container {  background-color: yellow;  color: green;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="button">Click to add a div</button><div class="container">  <div class="row"></div></div>

How to use :not selector with :nth-of-type

Some options:

1. ~ selector - http://jsfiddle.net/5sKqX/

.new-items-table tr ~ tr:nth-of-type(odd) {background-color:red;}

It matched trs that are after other trs, so it skips the header row.

2. use <thead> - http://jsfiddle.net/5sKqX/1/

<thead>
    <tr><th>Header</th></tr>        
</thead>
<tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</tbody>

Css:

.new-items-table tr:nth-of-type(even) {background-color:red;}

3. use :not(:first-child) - http://jsfiddle.net/5sKqX/2/

.new-items-table tr:nth-of-type(odd):not(:first-child) {background-color:red;}

Combining :nth-of-type() and :not

I assumed css wouuld filter the :not items first before applying the :nth-of-type

Nope. CSS is fully declarative; every selector is a simple condition that is true or false independently of any selector part. It's not a procedural language where you take a set and process it, narrowing it down with each step. A selector language with procedural rules would be immune to many kinds of optimisation and would be slower.

So nth-of-type is only about position within an element's parent, and not position in a 'results list so far' because CSS selectors have no such concept. A selector engine could look up the test for nth-of-type before narrowing it with not, as the rules do not interfere with each other.

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 to use nth-of-type for classes -- not elements

With only CSS hacks, without modifying your markup, you can do something like the below:

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

Demo Fiddle

nth-of-type doesn't work as expected

The nth-of-type pseudo selector is certainly working here as expected.

From MDN:

The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree

So

.test3:nth-of-type(3) {height: 100px;background: black;}

'works' because the div with class test3 also happens to be the third div within the container (div with class test)

however

.test3:nth-of-type(1) {height: 100px;background: black;}

doesn't select the test3 div because it isn't the first div in the container

Is nth-of-type work same as nth-child in this case?

In this case they are the same because all of the children in the container are divs.

---

In general, it could help to think about pseudo classes as a filter which matches only a subset of the matched selector (ie the part of the selector before the colon) when it is in the state that the pseudo class describes.

So for example .test:hover means: select all elements with class test - but only the ones which are being hovered.

Similarly here with nth-of-type: .test3:nth-of-type(3) means:

Select all elements with class test3, but only if it's the 3rd of that kind of element within it's container.

So take the following demo:

.test:nth-of-type(3) {  color:red;}

<div>  <ul>    <li class="test">li 1</li>    <li class="test">li 2</li>    <li class="test">li 3</li>    <li class="test">li 4</li>    <li class="test">li 5</li>  </ul>  <span class="test">span 1</span>  <span class="test">span 2</span>  <span class="test">span 3</span>  <span class="test">span 4</span>  <span class="test">span 5</span></div>

CSS selector with nth-of-type not working inside a tag

a tags are inline elements, div are block elements.

It's not a good practice to put block elements inside your inline elements.

But it's possible to just create a script to make the whole div clickable. Something like.

$("div").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return false;
});

HTML :

<div class="categorie-image custom-border" style="background-image:url(succes.png);">
    <div class="categorie-title">Text</div>
    <a href="#">Link</a>
</div>

This looks for a tags inside your div, and you can click anywhere on the div and it will redirect you to your link href value.

This case you won't have to change your CSS. Just an option.

:nth-child() and :nth-of-type() not working

:nth-child should be applied to the child itself, not the wrapper:

So instead of:

.postPrevWrap:nth-child(odd)

do this:

.postPrev:nth-child(odd)

---

Related Topics