What Does a Space Preceding :Nth-Child(N) Do

What does a space preceding :nth-child(n) do?

You're misunderstanding the selector. It selects the element that is also the :nth-child(n) which also has the preceding element as a parent.

When there is no selector preceding, it defaults to *:nth-child(n)

Because you probably only want to apply this to direct descendants and not every element which is the fourth child of its parent and a descendant of the parent, I would use .element > *:nth-child(n) to only apply to direct descendants.

div#wrap > *:nth-child(4) {
  border-bottom: 2px solid orange;
}

div#wrap > *:nth-child(4) {  border-bottom: 2px solid orange;}

<div id="wrap">  <h1>Heading 1</h1>  <p>This is a test!</p>  <h2>Creating content</h2>  <p>The next paragraph uses the <strong>.html</strong> method to create a new element.</p></div>

Different between :nth-child(-n+3) and :nth-child(3-n)

According to this, the formula format in the nth-child pseudo-class must be strictly in the form of An+B, B+An is not supported.

An+B is actually a formal notation in the document: An+B notation

You can see the older non-draft version of the document, this part is more or less the same

Why does the first nth-child select all of them?

Because in your HTML, all a tags is always the first child of li. Try to put the :nth-child(1) in li instead.

Also, I want point out the li .linav in your CSS selector. It means you are selecting the .linav inside li. It should be no space (li.linav) so the CSS will look for li that has a .linav class.

nav ul li.linav:nth-child(1) a:before

Not able to use nth-child to space out li's in a tags

Well you can't have an <a> as a direct child of a <ul> or <ol> only a <li> is valid so you want to switch the order of those around.

.profile-crop-buttons ul li:nth-child(2) is not working because as mentioned above the <li> is not a child of the <ul> the <a> is (the nth-child pseudo-class only selects a child of a given element not later descendants), but once you swap the order around the selector will work as expected.

Example

CSS nth-child for greater than and less than

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element
that has an+b-1 siblings before it in the document tree, for any
positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

nth-child and before

:nth-child() doesn't filter by classes or anything. In your code, your first ul.sub-comment isn't the very first child in #comments-wrapper, so it doesn't work.

Instead, use this selector technique and invert your height and margin-top styles as follows:

article div#comments-wrapper ul.sub-comment:before {
    width:1px;
    height:37px; /* was 67px in your code */
    background-color:#e4e4e4;
    position:absolute;
    margin-left:-595px;
    margin-top:-6px; /* was -36px in your code */
    content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
    height:67px; /* was 37px in your code */
    margin-top:-36px; /* was -6px in your code */
}

Basically, instead of :nth-child(1) (or :first-child for that matter), use a sibling selector with another ul.sub-comment to apply the original styles to all subsequent ul.sub-comment elements after the first one.

Updated fiddle (also inverted the background-color styles so the first one remains blue)

Selecting half the elements with :nth-child?

The only way you'd be able to get anywhere near to that in pure CSS is to do a selector on either nth-child(odd) or nth-child(even). If you want exactly the last half (and not either odd or even), then you'd have to use JavaScript/jQuery.

Using jQuery, you could get them using:

var yourList = $("ul li");

yourList = yourList.slice(0, Math.floor(yourList.length/2));

CSS nth-child: what exactly does nth-child(1n) select

Xn essentially means every Xth child, where Xn+Y is every Xth child with an offset of Y.

1n is quite nonsensical, as it will just select every child (every 1th child, which essentially is just every child).

div:nth-child(1n)
{
  color: red;
}

<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>

Have an issue with the css :nth-child property

Couple of issues...

1. There should only be one
   colon before nth-child. The double colon syntax is used for pseudo elements (eg. ::before, ::after) rather then pseudo selectors.

2. There should be a space before :nth-child. You want to select a child element, not the element itself.

3. visibility is a non-animatable property and so can not be transitioned. You could use
   opacity instead.

.army_selection:hover :nth-child(1) {  opacity: 1;  transition: 0.2s;}
.army_selection_bloc {  width: 300px;  height: 400px;  background-color: aqua;  opacity: 0;}

<div id="army1" class="army_selection">  <div class="army_selection_bloc">     </div></div>

---

Related Topics