ਦੀ ਵਰਤੋਂ: ਟੇਬਲਜ਼ ਦੇ ਨਾਲ nth-of-type (n)
ਟੇਬਲ ਨੂੰ ਪੜਨ ਲਈ ਅਸਾਨ ਬਣਾਉਣ ਲਈ, ਇਹ ਅਕਸਰ ਬਦਲਵੇਂ ਬੈਕਗਰਾਉਂਡ ਰੰਗ ਦੇ ਨਾਲ ਸਟਾਈਲ ਦੀਆਂ ਕਤਾਰਾਂ ਲਈ ਸਹਾਇਕ ਹੁੰਦਾ ਹੈ. ਸਟਾਈਲ ਟੇਬਲ ਦੇ ਸਭ ਤੋਂ ਆਮ ਢੰਗਾਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਹਰੇਕ ਦੂਜੇ ਪੰਨੇ ਦਾ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਸੈੱਟ ਕੀਤਾ ਜਾਵੇ ਇਸ ਨੂੰ ਅਕਸਰ "ਜ਼ੈਬਰਾ ਸਟਿਟੇਜ਼" ਵਜੋਂ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ.
ਤੁਸੀਂ ਇਹ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਹਰ ਦੂਸਰੀ ਕਤਾਰ ਨੂੰ CSS ਕਲਾਸ ਦੇ ਨਾਲ ਸੈੱਟ ਕਰਕੇ ਅਤੇ ਉਸ ਕਲਾਸ ਲਈ ਸ਼ੈਲੀ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰ ਕੇ. ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ ਪਰ ਇਸ ਬਾਰੇ ਜਾਣਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਜਾਂ ਸਭ ਤੋਂ ਵਧੀਆ ਢੰਗ ਨਹੀਂ ਹੈ.
ਇਸ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਹਰ ਵਾਰ ਤੁਹਾਨੂੰ ਇਹ ਸਾਰਣੀ ਸੰਪਾਦਿਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਹਰ ਸਾਰਣੀ ਵਿੱਚ ਹਰ ਇੱਕ ਕਤਾਰ ਨੂੰ ਸੋਧਣਾ ਪੈ ਸਕਦਾ ਹੈ ਤਾਂ ਕਿ ਹਰ ਇੱਕ ਕਤਾਰ ਬਦਲਾਵ ਨਾਲ ਇਕਸਾਰ ਹੋਵੇ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਸਾਰਣੀ ਵਿੱਚ ਨਵੀਂ ਰੋਅ ਪਾਉਦੇ ਹੋ, ਤਾਂ ਹੇਠਾਂ ਹਰੇਕ ਦੂਸਰੀ ਕਤਾਰ 'ਤੇ ਕਲਾਸ ਬਦਲਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ.
ਸੀਜੀਜ਼ ਜ਼ੈਬਰਾ ਪੱਟੀਆਂ ਨਾਲ ਸਟਾਇਲ ਟੇਬਲ ਨਾਲ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ. ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਵਾਧੂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ CSS ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਤੁਸੀਂ ਸਿਰਫ: nth-of-type (n) CSS ਚੋਣਕਾਰ ਵਰਤਦੇ ਹੋ
ਇਹ: nth-of-type (n) ਚੋਣਕਾਰ CSS ਵਿੱਚ ਇੱਕ ਸਟ੍ਰਕਚਰਲ ਸੂਡੋ-ਕਲਾਸ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਮਾਪਿਆਂ ਅਤੇ ਭਰਾ ਦੇ ਤੱਤਾਂ ਦੇ ਸਬੰਧਾਂ ਦੇ ਆਧਾਰ ਤੇ ਸਟਾਈਲ ਦੇ ਤੱਤ ਦੇਂਦਾ ਹੈ. ਤੁਸੀਂ ਇਸਦਾ ਉਪਯੋਗ ਉਨ੍ਹਾਂ ਦੇ ਸਰੋਤ ਆਦੇਸ਼ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਜਾਂ ਵੱਧ ਤੱਤਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋ ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿਚ, ਇਹ ਹਰ ਇਕ ਤੱਤ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਜੋ ਇਕ ਖ਼ਾਸ ਕਿਸਮ ਦੇ ਇਸਦੇ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦਾ nth ਬੱਚਾ ਹੈ.
ਪੱਤਰ n ਇਕ ਸ਼ਬਦ (ਜਿਵੇਂ ਕਿ ਅਜੀਬ ਜਾਂ ਤਾਂ ਵੀ), ਇੱਕ ਨੰਬਰ, ਜਾਂ ਇੱਕ ਫਾਰਮੂਲਾ ਹੋ ਸਕਦਾ ਹੈ.
ਉਦਾਹਰਨ ਲਈ, ਪੀਲੇ ਬੈਕਗਰਾਉਂਡ ਰੰਗ ਦੇ ਨਾਲ ਹਰੇਕ ਦੂਜੇ ਪੈਰਾਗ੍ਰਾਫ ਟੈਗ ਨੂੰ ਸਟਾਇਲ ਕਰਨ ਲਈ, ਤੁਹਾਡੇ CSS ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇਹ ਸ਼ਾਮਲ ਹੋਣਗੇ:
p: nth-of-type (ਅਜੀਬ) {
ਪਿਛੋਕੜ: ਪੀਲੇ;
}
ਆਪਣੀ HTML ਸਾਰਣੀ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ
ਪਹਿਲਾਂ, ਆਪਣੀ ਸਾਰਣੀ ਬਣਾਉ ਜਿਵੇਂ ਤੁਸੀਂ ਆਮ ਤੌਰ ਤੇ HTML ਵਿੱਚ ਲਿਖੋਗੇ. ਕਤਾਰਾਂ ਜਾਂ ਕਾਲਮਾਂ ਵਿੱਚ ਕੋਈ ਵਿਸ਼ੇਸ਼ ਕਲਾਸਾਂ ਨਾ ਜੋਡ਼ੋ.
ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ, ਹੇਠਾਂ ਦਿੱਤੀ CSS ਜੋੜੋ:
tr: nth-of-type (odd) {
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #ccc;
}
ਇਹ ਹਰ ਦੂਸਰੀ ਕਤਾਰ ਨੂੰ ਸਲੇਟੀ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਨਾਲ ਪਹਿਲੇ ਕਤਾਰ ਦੇ ਸ਼ੁਰੂ ਤੋਂ ਸ਼ੁਰੂ ਕਰੇਗਾ.
ਇਕੋ ਤਰੀਕੇ ਨਾਲ ਸਟਾਇਲ ਅੈਲ ਪਰਿਵਰਤਨ ਕਾਲਮ
ਤੁਸੀਂ ਆਪਣੇ ਟੇਬਲਿਆਂ ਵਿਚ ਕਾਲਮਾਂ ਵਿਚ ਉਹੀ ਕਿਸਮ ਦੀ ਸਟਾਈਲ ਕਰ ਸਕਦੇ ਹੋ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਬਸ ਆਪਣੀ CSS ਕਲਾਸ ਵਿੱਚ tr ਨੂੰ td ਵਿੱਚ ਤਬਦੀਲ ਕਰੋ. ਉਦਾਹਰਣ ਲਈ:
td: nth-of-type (odd) {
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #ccc;
}
ਇੱਕ nth-of-type (n) ਚੋਣਕਾਰ ਵਿੱਚ ਫਾਰਮੂਲੇ ਦੀ ਵਰਤੋਂ
ਚੋਣਕਰਤਾ ਵਿੱਚ ਵਰਤੇ ਗਏ ਇੱਕ ਫ਼ਾਰਮੂਲੇ ਲਈ ਸੰਟੈਕਸ ਇੱਕ + ਬੀ ਹੈ.
ਇੱਕ ਉਹ ਨੰਬਰ ਹੈ ਜੋ ਚੱਕਰ ਜਾਂ ਸੂਚਕਾਂਕ ਦਾ ਆਕਾਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ.
n ਅਸਲ ਵਿੱਚ "n" ਅੱਖਰ ਹੈ ਅਤੇ ਇੱਕ ਕਾਊਂਟਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਜੋ ਕਿ 0 ਤੇ ਹੁੰਦਾ ਹੈ.
+ ਇੱਕ ਅੋਪਰੇਟਰ ਹੈ, ਜੋ ਕਿ ਵੀ ਹੋ ਸਕਦਾ ਹੈ "-"
b ਇੱਕ ਪੂਰਨ ਅੰਕ ਹੈ ਅਤੇ ਆਫਸੈੱਟ ਵੈਲਯੂ ਨੂੰ ਪ੍ਰਸਤੁਤ ਕਰਦਾ ਹੈ - ਉਦਾਹਰਣ ਲਈ, ਚੋਣਕਾਰ ਨੇ ਪਿੱਠਭੂਮੀ ਰੰਗ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਸ਼ੁਰੂ ਕੀਤਾ ਹੈ. ਇਹ ਲੋੜੀਂਦਾ ਹੈ ਜੇਕਰ ਇਕ ਓਪਰੇਟਰ ਨੂੰ ਫਾਰਮੂਲਾ ਵਿੱਚ ਸ਼ਾਮਿਲ ਕੀਤਾ ਗਿਆ ਹੋਵੇ.
ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ ਹਰ ਤੀਜੀ ਲਾਈਨ ਲਈ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਸੈਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਫਾਰਮੂਲਾ 3n + 0 ਹੋਵੇਗਾ. ਤੁਹਾਡਾ CSS ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
tr: nth-of-type (3n + 0) {
ਪਿਛੋਕੜ: slategray;
}
Nth-of-type selector ਵਰਤਣ ਲਈ ਸਹਾਇਕ ਟੂਲ
ਜੇ ਤੁਹਾਨੂੰ ਸੂਡੋ-ਵਰਗ ਦੇ ਨੱਥ-ਔਥ-ਟਾਈਪ ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਫ਼ਾਰਮੂਲਾ ਪਹਿਲੂ ਦੁਆਰਾ ਥੋੜਾ ਨਿਰਾਸ਼ਾ ਮਹਿਸੂਸ ਹੋ ਰਹੀ ਹੈ, ਤਾਂ ਇਹ ਵਰਤੋ: nth ਟੈਸਟਰ ਸਾਈਟ ਨੂੰ ਇੱਕ ਉਪਯੋਗੀ ਔਜਾਰ ਦੇ ਤੌਰ ਤੇ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੀ ਪਸੰਦ ਦੀ ਦਿੱਖ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਿੰਟੈਕਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ. Nth-of-type ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਲਟਕਦੇ ਮੇਨੂ ਨੂੰ ਵਰਤੋ (ਤੁਸੀਂ ਇੱਥੇ ਦੂਜੇ ਸੂਡੋ-ਵਰਗਾਂ ਦੇ ਨਾਲ ਵੀ ਪ੍ਰਯੋਗ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ nth-child).