CSS ਕੰਬਾਈਨਰ

CSS ਕੰਬਾਈਨਰ

ਕੰਬਾਈਨਰ ਚੋਣਕਾਰਾਂ ਦਰਮਿਆਨ ਸਬੰਧ ਦੇ ਮਾਤਰਬੱਧ ਮੱਦੇ ਹਨ。

CSS ਚੋਣਕਾਰ ਕਈ ਸਰਲ ਚੋਣਕਾਰਾਂ ਨੂੰ ਸਮੇਟ ਸਕਦੇ ਹਨ। ਸਰਲ ਚੋਣਕਾਰਾਂ ਵਿੱਚ ਕੰਬਾਈਨਰ ਹੋ ਸਕਦੇ ਹਨ。

CSS ਵਿੱਚ ਚਾਰ ਵਿਧੇ ਕੰਬਾਈਨਰ ਹਨ:

  • ਵੰਡਾਂ ਚੋਣਕਾਰ (ਖਾਲੀ )
  • ਸਬੰਧੀ ਚੋਣਕਾਰ (>)
  • ਮਧਿਆਹਟ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ (+)
  • ਜਨਰਿਕ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ (~)

ਵੰਡਾਂ ਚੋਣਕਾਰ

ਵੰਡਾਂ ਚੋਣਕਾਰ ਹਰ ਨਿਰਦਿਸ਼ਟ ਐਲੀਮੈਂਟ ਦੇ ਵੰਡਾਂ ਐਲੀਮੈਂਟਸ ਮੈਚ ਕਰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ <div> ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਸ ਚੁਣੇ ਜਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

div p {
  background-color: yellow;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕਰੋ

ਸਬੰਧੀ ਚੋਣਕਾਰ

ਸਬੰਧੀ ਚੋਣਕਾਰ ਹਰ ਨਿਰਦਿਸ਼ਟ ਐਲੀਮੈਂਟ ਦੇ ਸਬੰਧੀ ਸਬੰਧੀ ਸਬੰਧੀ ਐਲੀਮੈਂਟਸ ਮੈਚ ਕਰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ <div> ਐਲੀਮੈਂਟ ਦੇ ਸਬੰਧੀ ਸਬੰਧੀ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਸ ਚੁਣੇ ਜਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

div > p {
  background-color: yellow;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕਰੋ

ਮਧਿਆਹਟ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ

ਮਧਿਆਹਟ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ ਹਰ ਨਿਰਦਿਸ਼ਟ ਐਲੀਮੈਂਟ ਦੇ ਮਧਿਆਹਟ ਭਾਈਚਾਰੇ ਐਲੀਮੈਂਟਸ ਮੈਚ ਕਰਦਾ ਹੈ。

ਭਾਈਚਾਰੇ (ਸਮਾਨ ਪੱਧਰ) ਐਲੀਮੈਂਟ ਨੂੰ ਮਿਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਉਹ ਇੱਕ ਸਮਾਨ ਮਾਂ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਹੋਣ, "ਮਧਿਆਹਟ" ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਉਹ ਇੱਕ ਦੂਜੇ ਦੇ ਬਾਅਦ ਹਨ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ <div> ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ ਦੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਸ ਚੁਣੇ ਜਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

div + p {
  background-color: yellow;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕਰੋ

ਜਨਰਿਕ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ

ਜਨਰਿਕ ਭਾਈਚਾਰੇ ਚੋਣਕਾਰ ਹਰ ਨਿਰਦਿਸ਼ਟ ਐਲੀਮੈਂਟ ਦੇ ਸਮਾਨ ਪੱਧਰ ਦੇ ਸਾਰੇ ਐਲੀਮੈਂਟਸ ਮੈਚ ਕਰਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ <div> ਐਲੀਮੈਂਟ ਦੇ ਸਮਾਨ ਪੱਧਰ ਦੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਸ ਚੁਣੇ ਜਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

div ~ p {
  background-color: yellow;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਕਰੋ

ਸਾਰੇ CSS ਕੰਬਾਈਨਡ ਚੋਣਕਾਰ

ਚੋਣਕਾਰ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
element element div p ਚੋਣ <div> ਅਤੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟਸ.
element>element div > p علامت <div> کا والد علامت <p> کا تمام علامات کو انتخاب کریں
element+element div + p علامت <div> کے بعد آنے والے تمام <p> علامات کو انتخاب کریں
element1~element2 p ~ ul پچھلے <p> علامت والے ہر <ul> علامت کو انتخاب کریں

ترقیاتی خواندگی

بائیک بک:CSS وارس سلیکٹر

بائیک بک:CSS چھوٹی سلیکٹر

بائیک بک:CSS آگلایا بھائی سلیکٹر