How to Use the Nth-Child Value as a Parameter in a Property? (And How)

Use nth-child value as a SASS variable

I don't think there's a way to do exactly that. But you can use @for directive to loop through a known number of elements:

$elements: 15;
@for $i from 0 to $elements {
  div:nth-child(#{$i + 1}) {
     background: rgb($i, $i, $i);
  }
}

Is there a way to use the n value in :nth-child(n)?

CSS doesn't have support for variables. You could use Less/SASS loops and define it for n up to some value, but that would output almost the same CSS multiple times. Here is Codepen example.

SCSS code to support up to 10 cards:

$n: 10;

@for $i from 1 through $n {
  .card:nth-child(#{$i}) {
    position: absolute;
    left: 10px * $i;
    top: 10px * $i;
  }
}

But are you sure your approach is correct? Maybe you want to take a step back and look for a different approach. Because this still doesn't scale dynamically, you'll have to predict or limit n to some value. If you were to pick large n, it would result in a big CSS file, which equals longer load times.

How to pass a CSS variable correctly in nth-child?

The only place where you can use CSS custom properties (which are not "variables"!) is in declarations, after the :. This also means that unfortunately you cannot use these custom properties in selectors, or in media queries.

That is also the reason why people really should stop calling them CSS "variables".

You can, however, manipulate styles using Javascript:

const dynamicStyles = document.getElementById('dynamicStyles');

const n = getComputedStyle(document.documentElement).getPropertyValue('--n');

dynamicStyles.textContent = `
div p:nth-child(${n}) {
  background: green;
  padding: 10px;
}
`;

:root {
  --n: 3;
}

<style id="dynamicStyles"></style>
<div>
  <p>a</p>
  <p>b</p>
  <p>c</p>
</div>

Apply Display to Certain nth-child

Yes. :nth-child accepts an n parameter which will take all non-negative integer values.

:nth-child(-n+4)

n=0: selects 4th child
n=1: selects 3th child
n=2: selects 2nd child
n=3: selects 1st child
n>3: nothing

Example:

div {

  margin: 10px;

}

div:nth-child(-n+4) {

  background: green;

}

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

nth-child selector in javascript

You should be using :nth-of-type instead of :nth-child because the :nth-child selector will also count the first path element:

const selector = document.querySelector('.yAxis g:nth-of-type(2)');
console.log(selector.outerHTML);

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
  <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
  <rect class="boundRect" x="50" y="50" width="1180" height="620" fill="none" stroke="green"></rect>
  <g class="bound" style="transform: translate(50px, 50px);">
    <g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" class="yAxis">
      <path class="domain" stroke="currentColor" d="M0.5,620.5V0.5"></path>
      <g class="tick" opacity="1" transform="translate(0,620.5)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">0</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,549.531741126106)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">10,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,478.56348225221205)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">20,000</text>
      </g>
      <g class="tick" opacity="1" transform="translate(0,407.59522337831805)">
        <line stroke="currentColor" x2="-6"></line>
        <text fill="currentColor" x="-9" dy="0.32em">30,000</text>
      </g>
    </g>
  </g>
</svg>

nth child find not a function

If you want to find the first occuring child node, you should use a.querySelector('*:nth-child(1)', for example, not a.find(...). The .find() method is probably what you're familiar with if you've used jQuery before, but that method does not exist on elements.

Element.querySelector will attempt to find the first match of the supplied selector among your element's descendant nodes.

See the updated proof-of-concept code below:

var a = document.getElementById('img0')

var x = a.querySelector('*:nth-child(' + 1 + ')');

console.log(x);

<div id="img0" class="det-img">

  <img src="https://www.sustainablewestonma.org/swag/public/uploads/acu2020-img1-1200X800.jpg ">

</div>

Changing properties of nth child in JavaScript

Why do you want to do this with JavaScript? You should be able to use CSS:

nav ul li {
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}

nav ul li:nth-of-type(1){
    background-image: url('images/navigation/active_home.png');
}
/* Like this */
nav ul li:nth-of-type(1):hover {
    background-image: url('images/navigation/active_home_hover.png');
}

nav ul li:nth-of-type(2){
    background-image: url('images/navigation/courses.png');
}
nav ul li:nth-of-type(3){
    background-image: url('images/navigation/lectures.png');
}
nav ul li:nth-of-type(4){
    background-image: url('images/navigation/admission.png');
}
nav ul li:nth-of-type(5){
    background-image: url('images/navigation/facilities.png');
}
nav ul li:nth-of-type(6){
    background-image: url('images/navigation/contact.png');
}