CSS :nth-child() ਪਸੰਦ ਪ੍ਰਤੀਯੋਗੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

CSS :ਨਾਥ-ਚਾਇਲਡ(ਐਨ) 伪类用于匹配作为其父元素第 ਐਨ 个子元素的任何元素。

此伪类根据元素在其父元素的子列表中的索引来匹配元素。

ਐਨ 可以是一个数字/索引、一个关键字（ਓਡਡੀ 或 ਈਵਨ）或一个公式（如 ਏਐਨ + ਬੀ）。

提示：查看 :nth-of-type() 伪类以选择作为其父元素中同类型（标签名）ਦਾ ਐਨ ਦੇ ਬੱਚੇ ਐਲੀਮੈਂਟ ਦਾ ਐਲੀਮੈਂਟ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਕਿਵੇਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ :ਨਾਥ-ਚਾਇਲਡ() ਪਸੀਡਾ ਕਲਾਸ:

/* ਕਿਸੇ ਭਾਈਚਾਰੇ ਵਿੱਚ ਚੋਣਵੇਂ ਬੱਚੇ ਦੇ ਚੌਥੇ ਐਲੀਮੈਂਟ ਚੋਣ ਕਰੋ */
:ਨਾਥ-ਚਾਇਲਡ(4) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਜੈਲਾਈਨ;
}
/* div ਭਾਈਚਾਰੇ ਵਿੱਚ ਦੂਜੇ ਐਲੀਮੈਂਟ ਚੋਣ ਕਰੋ */
div:ਨਾਥ-ਚਾਇਲਡ(2) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਰੈੱਡ;
}
/* ਸੂਚੀ ਵਿੱਚ ਦੂਜੇ li ਐਲੀਮੈਂਟ ਚੋਣ ਕਰੋ */
li:ਨਾਥ-ਚਾਇਲਡ(2) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਲਾਈਟਗਰੀਨ;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਓਡਡੀ ਅਤੇ ਈਵਨ ਇਹ ਇੱਕ ਕੀਵਰਡ ਹੈ ਅਤੇ ਇਸਦੀ ਵਰਤੋਂ ਓਡਡੀ ਜਾਂ ਈਵਨ ਇੰਡੈਕਸ ਦੇ ਬੱਚੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ (ਪਹਿਲੇ ਬੱਚੇ ਦਾ ਇੰਡੈਕਸ 1 ਹੁੰਦਾ ਹੈ)

ਇੱਥੇ ਅਸੀਂ ਓਡਡੀ ਅਤੇ ਈਵਨ ਇੰਡੈਕਸ ਦੇ <p> ਐਲੀਮੈਂਟਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨਿਰਦੇਸ਼ਿਤ ਕਰਦੇ ਹਾਂ:

p:ਨਾਥ-ਚਾਇਲਡ(ਓਡਡੀ) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਰੈੱਡ;
}
p:ਨਾਥ-ਚਾਇਲਡ(ਈਵਨ) {
  ਬੈਕਗਰਾਊਂਡ: ਲਾਈਟਗਰੀਨ;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇਸ ਫਾਰਮੂਲੇ(ਏਐਨ + ਬੀ) ਵਿਸ਼ੇਸ਼ਤਾ:ਏ ਇਹ ਇੱਕ ਪੂਰਣ ਸੰਖਿਆ ਸਟੇਪ ਹੈ，ਨ ਇਸਦੇ ਸਭ ਤੋਂ ਛੋਟੇ ਸੰਖਿਆ ਦਾ ਗੁਣਨਕ ਹੈ ਅਤੇ ਇਹ ਸਭ ਤੋਂ ਛੋਟੇ ਸੰਖਿਆ ਦੇ ਸਭ ਤੋਂ ਛੋਟੇ ਗੁਣਨਕ ਹੈ ਜਿਸਦਾ ਗੁਣਨਕ ਸੰਖਿਆ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਹ ਪੂਰਣ ਸੰਖਿਆ ਹੈਬੀ ਇਹ ਇੱਕ ਪੂਰਣ ਸੰਖਿਆ ਹੈ。

ਇੱਥੇ ਅਸੀਂ ਇਨਡੈਕਸ 3 ਦੇ ਗੁਣਨਕ ਦੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਾਂ ਲਈ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨਿਰਦੇਸ਼ਿਤ ਕਰਦੇ ਹਾਂ (ਅਜਿਹੇ ਕਿ ਤੀਜੇ, ਛੇਵੇਂ, ਨੌਵੇਂ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਹੀ ਹੋਰ ਚੋਣ ਕਰਦੇ ਹਾਂ):

p:ਨਾਥ-ਚਾਇਲਡ(3n+1) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਰੈੱਡ;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

ਇੱਥੇ ਅਸੀਂ ਇਨਡੈਕਸ 3 ਦੇ ਗੁਣਨਕ ਦੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਾਂ ਲਈ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਨਿਰਦੇਸ਼ਿਤ ਕਰਦੇ ਹਾਂ। ਫਿਰ ਅਸੀਂ 1 ਘਟਾਉਂਦੇ ਹਾਂ (ਅਜਿਹੇ ਕਿ ਪਹਿਲਾਂ ਦਾ, ਚੌਥਾਂ ਦਾ, ਸੱਤਵਾਂ ਦਾ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਹੀ ਹੋਰ ਚੋਣ ਕਰਦੇ ਹਾਂ):

p:ਨਾਥ-ਚਾਇਲਡ(3n-1) {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: ਰੈੱਡ;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੀਐੱਸਐੱਸ ਗਰਮਾਤਾ

:ਨਾਥ-ਚਾਇਲਡ(ਇੰਡੈਕਸ ਲੋ ਓਡਡੀ | ਈਵਨ | ਏਐਨ+ਬੀ) {
  ਸੀਐੱਸਐੱਸ ਨਿਰਦੇਸ਼ਾਂ;
}

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਾਰੇ ਪਸੀਡਾ ਕਲਾਸਾਂ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੀ ਸਮਰੱਥਾ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦੇ ਨੰਬਰ ਸਾਰੇ ਤੇਲਬੀਆਂ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਹਨ。