ਇੱਕ CSS Descendant Selector ਕੀ ਹੈ?

ਇੱਕ HTML ਦਸਤਾਵੇਜ਼ ਦੀ ਬਣਤਰ ਇੱਕ ਪਰਿਵਾਰ ਦੇ ਦਰਖਤ ਦੇ ਸਮਾਨ ਹੈ. ਆਪਣੇ ਪਰਿਵਾਰ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਤੁਹਾਡੇ ਮਾਤਾ-ਪਿਤਾ ਅਤੇ ਹੋਰ ਤੁਹਾਡੇ ਨਾਲ ਆਏ ਸਨ. ਇਹ ਤੁਹਾਡੇ ਪੁਰਖੇ ਹਨ. ਬੱਚੇ ਅਤੇ ਉਹ ਜਿਹੜੇ ਤੁਹਾਡੇ ਤੋਂ ਬਾਅਦ ਇਸ ਰੁੱਖ 'ਤੇ ਆਉਂਦੇ ਹਨ ਤੁਹਾਡੇ ਉਤਰਾਧਿਕਾਰੀਆਂ ਹਨ ਐਚਟੀਐਮਐਸ ਇਕੋ ਜਿਹੇ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਹੋਰ ਤੱਤ ਦੇ ਅੰਦਰਲੇ ਤੱਤ ਹਨ ਉਹਨਾਂ ਦੇ ਵੰਸ਼. ਉਦਾਹਰਨ ਲਈ, ਕਿਉਂਕਿ ਲਗਭਗ ਹਰੇਕ ਐਚਟੀਐਮ ਐਲੀਮੈਂਟ ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਹੈ, ਉਹ ਉਸ ਸਰੀਰ ਦੇ ਸੰਤਾਨ ਹੋਣਗੇ ਜੋ ਕਿ ਤੱਤ ਹਨ. ਇਹ ਸਬੰਧ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ CSS ਦੇ ਨਾਲ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ ਅਤੇ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੱਤਾਂ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ.

CSS Descendant Selectors

ਇੱਕ CSS ਉੱਤਰਾਧਿਕਾਰੀ ਚੋਣਕਰਤਾ ਉਸ ਤੱਤ ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜੋ ਕਿਸੇ ਹੋਰ ਤੱਤ ਦੇ ਅੰਦਰ ਹੁੰਦੇ ਹਨ (ਜਾਂ ਹੋਰ ਸਹੀ ਰੂਪ ਵਿੱਚ ਕਿਹਾ ਗਿਆ ਹੈ, ਇੱਕ ਤੱਤ ਜੋ ਕਿਸੇ ਹੋਰ ਤੱਤ ਦਾ ਇੱਕ ਵੰਸ਼ ਹੈ). ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਵਿੱਚ ਟੈਗਸ ਦੇ ਨਾਲ ਇੱਕ ਟੈਗ ਹੈ ਜੋ ਉੱਤਰਾਧਿਕਾਰੀ ਦੇ ਰੂਪ ਵਿੱਚ ਹੈ. ਆਓ ਇਕ ਉਦਾਹਰਣ ਦੇ ਤੌਰ ਤੇ ਹੇਠ ਦਿੱਤੇ HTML ਦੀ ਵਰਤੋਂ ਕਰੀਏ:

• ਇਹ ਇੱਕ ਲਿੰਕ ਹੈ

  ਇਹ LI ਟੈਗ ਉੱਲ ਦੇ ਟੈਗ ਦੇ ਉੱਤਰਾਧਿਕਾਰੀ ਹਨ. ਏ ਟੈਗ ਦੋਵੇਂ LI (ਬੱਚੇ ਦੇ ਉਤਰਾਧਿਕਾਰੀ) ਅਤੇ ਯੂਐੱਲ (ਦਾਦਾ-ਦਾਦੀ ਜੀਅ) ਟੈਗ ਦੇ ਉੱਤਰਾਧਿਕਾਰੀ ਹਨ. ਜੇ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ ਕਿ ਇਸ ਬਾਰੇ ਪਰਿਵਾਰਕ ਉਦਾਹਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸੋਚਦੇ ਹੋ, ਤਾਂ

  ਮਾਪੇ ਹੋਣਗੇ,
  • ਉਹ ਤੱਤ ਦਾ ਬੱਚਾ ਹੋਵੇਗਾ, ਅਤੇ
  • ਦਾ ਬੱਚਾ ਹੋਵੇਗਾ ਅਤੇ ਪੋਤੇ ਦੀ ਪੋਤਰੀ
    .

    ਇਸ ਲਈ ਤੁਸੀਂ ਇਹਨਾਂ ਵੰਸ਼ ਦੇ ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਵੈਬ ਪੇਜ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਨਿਸ਼ਾਨਾ ਬਣਾਵੋਗੇ? ਪਹਿਲਾਂ, ਤੁਹਾਨੂੰ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ ਦੋ (ਜਾਂ ਵੱਧ) ਟਾਈਪ ਚੋਣਕਰਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਡੇਰੇ ਚੋਣਕਾਰ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਨਾ ਹੋਵੇਗਾ.

    li a {text-decoration: none; }

    ਉਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਸਟਾਈਲ ਸਿਰਫ ਇੱਕ ਲਿੰਕ ਐਲੀਮੈਂਟ () ਤੇ ਲਾਗੂ ਹੋਵੇਗਾ ਜੋ ਸੂਚੀ-ਇਕਾਈ ਤੱਤ ([li>) ਦੇ ਵੰਸ਼ ਵਿੱਚੋਂ ਹੈ. ਸਫ਼ੇ ਤੇ ਹੋਰ ਸਾਰੇ ਲਿੰਕ, ਜੋ ਕਿ ਸੂਚੀ ਆਈਟਮ ਦੇ ਉੱਤਰਾਧਿਕਾਰੀ ਨਹੀਂ ਹਨ, ਨੂੰ ਇਹ ਸ਼ੈਲੀ ਨਹੀਂ ਮਿਲੇਗੀ.

    ਯਾਦ ਰੱਖਣ ਵਾਲੀ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਗੱਲ ਇਹ ਹੈ ਕਿ ਇਸ ਨਾਲ ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਸੰਤਾਨ ਦੇ ਚੋਣਕਾਰ ਵਿੱਚ ਕਿਨ੍ਹਾਂ ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ. ਜੇ ਦੂਜੇ ਤੱਤ ਪਹਿਲੇ ਤੱਤ ਦੇ ਅੰਦਰ ਕਿਤੇ ਵੀ ਨੱਥੀ ਹੋ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਵੰਸ਼ ਦੇ ਤੌਰ ਤੇ ਚੁਣਿਆ ਜਾਵੇਗਾ.

    ਜੇ ਤੁਸੀਂ ਉਂਗਲ ਦੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਲਿਖੋਗੇ:

    ਉਲ ਇੱਕ {ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; }

    ਹੁਣ, ਇਹਨਾਂ ਸਟਾਈਲ ਨੂੰ ਕਿਸੇ ਵੀ ਲਿੰਕ ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ ਜੋ ਸੂਚੀ ਆਈਟਮ ਦੇ ਵੰਸ਼ ਵਿੱਚੋਂ ਹੈ. ਤੁਸੀਂ ਇਹ ਚੋਣਕਾਰ ਵੀ ਲਿਖ ਸਕਦੇ ਹੋ

    ul li a {text-decoration: none; }

    ਇਹ ਇਕ ਵਡੇਰੀ ਚੋਣਕਾਰ ਹੈ ਜੋ ਦੋ ਤੋਂ ਵੱਧ ਚੋਣਕਾਰਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦਾ ਹੈ. ਇਸ ਕੇਸ ਵਿੱਚ, ਇਹ ਉਹਨਾਂ ਲਿੰਕਸ ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜੋ ਲਿਸਟ-ਆਈਟਮ ਦੇ ਅੰਦਰ ਅਤੇ ਇੱਕ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਦੇ ਅੰਦਰ ਹਨ.

    ਕਲਾਸ ਚੋਣਕਰਤਾ ਅਤੇ ID ਚੋਣਕਰਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ

    ਜਿਸ ਚੋਣਕਰਤਾ ਤੋਂ ਤੁਸੀਂ ਉਤਾਰ ਰਹੇ ਹੋ, ਉਸ ਨੂੰ ਹਮੇਸ਼ਾਂ ਕਿਸਮ ਦੀ ਵੰਸ਼ ਦਰਸਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ. ਉਦਾਹਰਨ ਲਈ, ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਾਈਟ ਦਾ ਇੱਕ ਖੇਤਰ ਸੀ (ਜਿਵੇਂ ਇੱਕ ਡਵੀਜ਼ਨ) ਜਿਸਦੇ ਨਾਲ "ਬਿਲਬੋਰਡ" ਦਾ ID ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ. ਤੁਸੀਂ ਉਸ ID ਤੋਂ ਇੱਕ ਵਕੀਲ ਚੋਣਕਾਰ ਨੂੰ ਸਥਾਪਤ ਕਰ ਸਕਦੇ ਹੋ:

    #billboard ul {background-color: #ccc; }

    ਇਹ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਨੂੰ ਸ਼ੈਲੀ ਦੇਵੇਗਾ ਜੋ ਕਿ ਇਕ ਐਲੀਮੈਂਟ ਦੇ ਇੱਕ ਉੱਤਰਾਧਿਕਾਰੀ ਦੀ ਹੈ ਜਿਸਦਾ ਇੱਕ "ਬਿਲਬੋਰਡ" ID ਹੁੰਦਾ ਹੈ. ਤੁਸੀਂ ਕਲਾਸ ਮੁੱਲਾਂ ਲਈ ਵੀ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ.

    div.billboard ul {background-color: #ccc; }

    ਇਹ ਮੰਨਦਾ ਹੈ ਕਿ ਡਵੀਜ਼ਨ ਵਿੱਚ "ਬਿਲਬੋਰਡ" ਦਾ ਕਲਾਸ ਵੈਲਯੂ ਹੈ ਉਪਰੋਕਤ CSS ਇਸ ਸ਼੍ਰੇਣੀ ਦੇ ਮੁੱਲ ਵਾਲੇ ਕਿਸੇ ਵੀ ਡਿਵੀਜ਼ਨ ਦੇ ਅੰਦਰ

    ਤੱਤ ਨੂੰ ਰੰਗਤ ਕਰੇਗਾ.

    ਤੁਸੀਂ ਵਡੇਰੇ ਚੋਣਕਾਰ ਦੇ ਨਾਲ ਅਸਲ ਵਿੱਚ ਭਾਰੀ ਹੱਥਕੜੀ ਅਤੇ ਸ਼ਬਦ-ਜੋੜ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਐਚਐਚਐਲ ਕੋਡ ਨੂੰ ਲਿਖਣ ਲਈ ਡ੍ਰੀਮਾਈਵਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਸੈੱਟ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਨਵੇਂ CSS ਨਿਯਮ ਜੋੜਦੇ ਹੋ ਜੋ ਉਸ ਸਫੇ ਤੇ ਤੁਹਾਡੇ ਕਰਸਰ ਦੀ ਪਲੇਸਮੈਂਟ ਦੇ ਅਧਾਰ ਤੇ ਚੋਣਕਾਰ ਨੂੰ ਆਟੋ-ਬਣਾ ਦੇਵੇਗਾ. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ Dreamweaver ਕੀ ਕਰਦਾ ਹੈ ਇੱਕ ਬੇਜੋੜ ਵਿਅੰਜਨ ਅਤੇ ਲੰਬਾ ਵੰਸ਼ਜ ਚੋਣਕਾਰ ਬਣਾਉਂਦਾ ਹੈ. ਤੁਹਾਡੇ CSS ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਇਹ ਬਹੁਤ ਖਾਸ ਗੱਲ ਨਹੀਂ ਹੈ. ਜੋ ਤੁਸੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਉਹ ਇਕ ਵਡੇਰੇ ਚੋਣਕਾਰ ਵਿਚ ਸੰਤੁਲਨ ਲੱਭਦਾ ਹੈ ਜੋ ਕਾਫ਼ੀ ਖਾਸ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਲੋੜੀਂਦੇ ਸਹੀ ਤਾਣੇ ਬਾਣੇ (ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਪ੍ਰਭਾਵਿਤ ਨਾ ਕਰਨਾ ਚਾਹੋ) ਤੋਂ ਪ੍ਰਭਾਵਿਤ ਹੋ ਸਕਦੇ ਹੋ. ਵੱਡਾ