CSS ਬੱਚਾ ਐਲੀਮੈਂਟ ਚੋਣਕਰਤਾ

ਪੀੜ੍ਹੀ ਚੋਣਕਰਤਾ ਦੀ ਤੁਲਨਾ ਵਿੱਚ, ਸਬ-ਐਲੀਮੈਂਟ ਚੋਣਕਰਤਾ (Child selectors) ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਦੇ ਸਬ-ਐਲੀਮੈਂਟਸ ਨੂੰ ਚੁਣ ਸਕਦੀਆਂ ਹਨ。

ਸਬ-ਐਲੀਮੈਂਟ ਚੋਣ

ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਪੀੜ੍ਹੀ ਦੇ ਐਲੀਮੈਂਟਸ ਦੀ ਚੋਣ ਨਹੀਂ ਕਰਨੀ ਚਾਹੁੰਦੇ ਹੋ, ਬਲਕਿ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਦੇ ਸਿਰਫ ਸਬ-ਐਲੀਮੈਂਟਸ ਨੂੰ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸਬ-ਐਲੀਮੈਂਟ ਚੋਣਕਰਤਾ (Child selector) ਵਰਤੋਂ ਕਰੋ。

ਉਦਾਹਰਣ ਵਜੋਂ, ਅਗਰ ਤੁਸੀਂ ਹੋਰ ਹੀ ਹੱਦ ਵਿੱਚ ਚੋਣ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਉਹ ਸਿਰਫ ਹੱਦ ਦੇ ਸਟਰਾਂਗ ਐਲੀਮੈਂਟਸ ਨੂੰ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਤਰ੍ਹਾਂ ਲਿਖ ਸਕਦੇ ਹੋ:

h1 > strong {color:red;}

ਇਹ ਕਿਸਮ ਪਹਿਲੇ h1 ਤੋਂ ਨਿਚੋਰ ਦੋ ਸਟਰਾਂਗ ਐਲੀਮੈਂਟਸ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਪਰ ਦੂਜੇ h1 ਵਿੱਚ ਸਟਰਾਂਗ ਗ਼ੈਰ ਪ੍ਰਭਾਵਿਤ ਹੁੰਦਾ ਹੈ:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਗਰੰਟੇਜ਼ ਸਮਾਧਾਨ

ਤੁਸੀਂ ਹੋਰ ਧਿਆਨ ਦੇਣ ਵਾਲੇ ਹੋਣਗੇ, ਬੱਚਾ ਚੋਣਕਰਤਾ ਵਿੱਚ ਸਮਾਨ ਹੱਦ ਦੇ ਪਰਿਵਾਰ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਬੱਚਾ ਜੋੜੀ ਦੋਵੇਂ ਤਰਫ ਪਰਿਵਾਰ ਹੋ ਸਕਦੇ ਹਨ, ਇਹ ਚੋਣਨ ਹੈ।ਇਸ ਲਈ, ਹੇਠ ਲਿਖੇ ਸਾਰੇ ਲਿਖਣ ਵਿੱਚ ਕੋਈ ਫਰਕ ਨਹੀਂ ਹੈ:

h1 > strong
h1> strong
h1 >strong
h1>strong

ਸੱਦੇ ਤੋਂ ਵੱਲ ਲੈ ਕੇ ਪੜ੍ਹਿਆ ਜਾਵੇ ਤਾਂ, ਚੋਣਕਰਤਾ h1 > strong ਨੂੰ 'h1 ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ strong ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਚੁਣੇਗੀ' ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

ਪਿਛਲੇ ਵਾਲੇ ਚੋਣਕਰਤਾ ਅਤੇ ਬੱਚਾ ਚੋਣਕਰਤਾ ਦੇ ਸੰਯੋਜਨ

ਹੇਠਾਂ ਦੀ ਚੋਣਕਰਤਾ ਦੇਖੋ:

table.company td > p

ਉੱਪਰ ਦੀ ਚੋਣਕਰਤਾ ਟੇਬਲ ਦੇ ਟੀਡੀ ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ ਪੀ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਚੁਣੇਗੀ, ਜਿਸ ਟੀਡੀ ਐਲੀਮੈਂਟ ਨੂੰ ਟੇਬਲ ਐਲੀਮੈਂਟ ਵੱਲੋਂ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸ ਦੇ ਕਲਾਸ ਪੈਰਾਮੀਟਰ ਵਿੱਚ 'company' ਹੈ。