سی ایس ایل وسیعت کا انتخاب

پسلیوی سلیکٹر (descendant selector) یا کانٹینر سلیکٹر کہا جاتا ہے。

后代选择器可以选择作为某元素后代的元素。

ਸਥਿਤੀ ਨੂੰ ਅਧਾਰ ਵਿੱਚ ਚੋਣਕਰਤਾ ਚੁਣਨ

ਅਸੀਂ ਵਾਲਿਡ ਚੋਣਕਰਤਾ ਦਾ ਉਪਯੋਗ ਕਰਕੇ ਕੁਝ ਨਿਯਮ ਬਣਾ ਸਕਦੇ ਹਾਂ ਜੋ ਕੁਝ ਦਸਤਾਵੇਜ਼ ਸਰੂਪਾਂ ਵਿੱਚ ਕੰਮ ਕਰਨ, ਜਦਕਿ ਦੂਜੇ ਸਰੂਪਾਂ ਵਿੱਚ ਨਹੀਂ ਕਰਦੇ।

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

h1 em {color:red;}

ਇਸ ਨਿਯਮ ਦੇ ਅਨੁਸਾਰ, h1 ਚੋਣਕਰਤਾ ਦੇ ਬਾਅਦ ਆਉਣ ਵਾਲੇ em ਚੋਣਕਰਤਾ ਦੇ ਟੈਕਸਟ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਬਣਾ ਦੇਵੇਗਾ। ਹੋਰ em ਟੈਕਸਟ (ਜਿਵੇਂ ਕਿ ਪੈਰਾਗ੍ਰਾਫ ਜਾਂ ਬਲਕ ਕਿਤਾਬ) ਇਸ ਨਿਯਮ ਦੇ ਅਨੁਸਾਰ ਚੋਣਕਰਤਾ ਨਹੀਂ ਹੋਣਗੇ:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

آپ خود کوشش کریئن

ਕੋਈ ਵੀ ਵਿਸ਼ੇਸ਼ ਸਥਿਤੀ ਵਿੱਚ, ਹੋਰ ਹੀ h1 ਵਿੱਚ ਚੋਣਕਰਤਾ ਦੇ ਹਰ ਇੱਕ em ਚੋਣਕਰਤਾ ਵਿੱਚ ਇਕ class ਲੱਛਣ ਲਗਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਲੇਕਿਨ ਵਾਲਿਡ ਚੋਣਕਰਤਾ ਦੀ ਸਮਰੱਥਾ ਤੋਂ ਵਧੇਰੇ ਹੈ。

ਗਰੰਥ ਨਿਰਵਾਚਨ

ਵਾਲਿਡ ਚੋਣਕਰਤਾ ਵਿੱਚ, ਨਿਯਮ ਦੇ ਖੱਬੇ ਪੱਖ ਵਿੱਚ ਚੋਣਕਰਤਾ ਦੋ ਜਾਂ ਵੱਧ ਚੋਣਕਰਤਾਵਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ, ਜੋ ਸਪੇਸ ਦੇ ਰੂਪ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਹਨ। ਚੋਣਕਰਤਾਵਾਂ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਸਪੇਸ ਇੱਕ ਜੋਡਕਾ ਹੈ (combinator)। ਹਰ ਇੱਕ ਜੋਡਕਾ ਨੂੰ ‘... ਵਿੱਚ ... ਮਿਲਣ ਵਾਲਾ’ ਦੇ ਰੂਪ ਵਿੱਚ ਸਮਝਿਆ ਜਾ ਸਕਦਾ ਹੈ, ‘... ਦਾ ਹਿੱਸਾ ਹੋਣ ਵਾਲਾ’ ਜਾਂ ‘... ਦੇ ਬਾਅਦ ਹੋਣ ਵਾਲਾ’ ਲੇਕਿਨ ਚੋਣਕਰਤਾ ਨੂੰ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਪੜ੍ਹਨਾ ਹੈ।

ਇਸ ਤਰ੍ਹਾਂ, h1 em ਚੋਣਕਰਤਾ ਨੂੰ ‘ਹੋਰ ਹੀ h1 ਦੇ ਬਾਅਦ ਕੋਈ ਵੀ em ਚੋਣਕਰਤਾ’ ਦੇ ਰੂਪ ਵਿੱਚ ਸਮਝਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਚੋਣਕਰਤਾ ਨੂੰ ਬਾਈਨਾਰੀ ਤੌਰ ‘ਤੇ ਸੰਭਾਲਿਆ ਜਾਵੇ ਤਾਂ, ਨਿਮਨਲਿਖਤ ਤਰੀਕੇ ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ: ‘ਹਰ ਇੱਕ em ਵਾਲੇ h1 ਨੂੰ ਹੇਠਲੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰੋ’

ਵਿਸ਼ੇਸ਼ ਐਪਲੀਕੇਸ਼ਨ

ਵਾਲਿਡ ਚੋਣਕਰਤਾ ਦਾ ਕੰਮ ਬਹੁਤ ਮਜ਼ਬੂਤ ਹੈ। ਇਸ ਦੇ ਨਾਲ, ਐੱਚਟੀਐੱਮਐੱਲ ਵਿੱਚ ਸੰਭਵ ਨਹੀਂ ਹੋਣ ਵਾਲੇ ਕੰਮਾਂ ਨੂੰ ਸੰਭਵ ਬਣਾ ਸਕਦੇ ਹਨ。

ਇਕ ਦਸਤਾਵੇਜ਼ ਹੈ, ਜਿਸ ਵਿੱਚ ਇਕ ਸਾਈਡਬਾਰ ਅਤੇ ਇਕ ਮੁੱਖ ਖੇਤਰ ਹੈ। ਸਾਈਡਬਾਰ ਦਾ ਪਿੱਨ ਲਾਲਾ ਹੈ, ਮੁੱਖ ਖੇਤਰ ਦਾ ਪਿੱਨ ਸਫ਼ੇਦ ਹੈ, ਇਹ ਦੋਵੇਂ ਖੇਤਰ ਲਿੰਕ ਸੂਚੀ ਸਮੇਤ ਹਨ। ਸਾਰੇ ਲਿੰਕਾਂ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਨਹੀਂ ਰੱਖਿਆ ਜਾ ਸਕਦਾ, ਕਿਉਂਕਿ ਇਸ ਤਰ੍ਹਾਂ ਸਾਈਡਬਾਰ ਵਿੱਚ ਲਾਲ ਲਿੰਕਾਂ ਨੂੰ ਨਹੀਂ ਦੇਖਿਆ ਜਾ ਸਕਦਾ。

ਸਮਾਧਾਨ ਹੈ ਵਾਲਿਡ ਚੋਣਕਰਤਾ ਦਾ ਉਪਯੋਗ ਕਰਨਾ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਬਾਰੇ ਵਾਲੇ div ਨੂੰ class ਲੱਛਣ ਵਾਲੀ sidebar ਸੈੱਟ ਕਰਨਾ ਹੈ, ਅਤੇ ਮੁੱਖ ਖੇਤਰ ਦੀ class ਲੱਛਣ ਮੁੱਖ ਸਮੱਗਰੀ ਸੈੱਟ ਕਰਨਾ ਹੈ। ਫਿਰ ਨਿਮਨਲਿਖਤ ਸਟਾਈਲ ਲਿਖੋ:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

وسیعت کا انتخاب کے بارے میں ایک آسان طور پر چھوئی جائی جاتی جگہ یہ ہے کہ دو علامات کے درمیان درجے کا فاصلہ نامحدود کرسکتا ہے۔

مثلاً اگر ul em لکھا جائے تو اس زبان کا استعمال سے ul علامت سے وابستہ تمام em علامات منتخب کئے جائیں گے، بغیر کہ em کا نیچل درجہ کتنا گہرا ہو

اس لئے، ul em کو لیکنار میں سارے em علامات منتخب کئے جائیں گے:

<ul>
  <li>لیسٹ آئٹم 1</li>
    <ol>
      <li>لیسٹ آئٹم 1-1</li>
      <li>لیسٹ آئٹم 1-2</li>
      <li>لیسٹ آئٹم 1-3</li>
        <ol>
          <li>لیسٹ آئٹم 1-3-1</li>
          <li>لیسٹ آئٹم</li> <em>1-3-2</em></li>
          <li>لیسٹ آئٹم 1-3-3</li>
        </ol>
      </li>
      <li>لیسٹ آئٹم 1-4</li>
    </ol>
  </li>
  <li>لیسٹ آئٹم 2</li>
  <li>لیسٹ آئٹم 3</li>
</ul>

آپ خود کوشش کریئن