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

Question

While I was writing a bit of CSS, a situation that I have never encountered before using the :nth-child(n) appeared and I was doubt of what is actually happening.
When I use pseudo classes, I write them without a space between the selector, like so:
div#wrap:hover {
border-bottom: 2px solid orange;
}
/* OR */
div#wrap:nth-child(4) {
border-bottom: 2px solid orange;
}
But it didn't work the way I expected, so I tried inserting a space between the selector and the pseudo class. Surprisingly, it worked:
div#wrap :nth-child(4) {
border-bottom: 2px solid orange;
}
What is happening to make this work?
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>

Answer 1

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>
If you wanted to be more specific and only select the fourth child if it is a <p> element, you can use .element > p:nth-child(n). This will select all <p> elements that are the fourth direct descendant of elements matching the div#wrap selector.
div#wrap > p:nth-child(4) {
border-bottom: 2px solid orange;
}
div#wrap > p: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>
If you want to select the second <p> element directly descending from each div#wrap, you can use .element > p:nth-of-type(n) like so:
div#wrap > p:nth-of-type(2) {
border-bottom: 2px solid orange;
}
div#wrap > p:nth-of-type(2) {
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>

Answer 2

What does the space do?
Space before :nth-child(4) is equal to *:nth-child(4). * is a global CSS selector. So if any child element which is 4th in the list of elements of any parent, the CSS rules are applied to that element.
But using #wrap before the nth-child will limit the scope of the selection within the #wrap element.
Alternate Solution(Understanding how nth-child works):
You can also use: p:nth-child(4) which targets the paragraph element which is 4th with respect to the parent element which is #wrap.
:nth-child will select irrespective of whatever the element is, or what the sibling elements are. You will need to use :nth-of-type to differentiate.
* {
font-family: Helvetica;
}
p:nth-child(4) {
border-bottom: 2px solid orange;
}
p:nth-of-type(2) {
background: lightblue;
color: #fff;
}
<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>

Answer 3

A space in a CSS selector means the next part is a descendant (not direct descendant) of what was previously selected.
tr td means a <td> inside a <tr>.
table td means a <td> inside a <table>.
In your case, the :nth-child() pseudo-class is applied after the <div> so it matches for the nth (4th...) child of that div. Had you removed the space, it would match a the 4th div with id "wrap" (which doesn't exist)