ਗਰੈਬਜ਼ਿਟ ਵਿੱਚ CSS ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਸੀਐਸਐਸ ਚੋਣਕਰਤਾਵਾਂ ਨੂੰ ਟੀਚੇ ਦੇ ਤੱਤ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤੱਤ ਲੁਕਾਓ ਅਤੇ ਇੱਕ ਜਾਂ ਵਧੇਰੇ HTML ਤੱਤਾਂ ਦੀ ਪਛਾਣ ਕਰਨ ਲਈ ਐਲੀਮੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਉਡੀਕ ਕਰੋ. CSS ਚੋਣਕਾਰਾਂ ਦੀਆਂ ਦੋ ਮੁੱਖ ਕਿਸਮਾਂ ਜਾਂ ਤਾਂ ਆਈਡੀ ਜਾਂ ਕਲਾਸ ਦੁਆਰਾ ਚੁਣਣੀਆਂ ਹਨ. ਇੱਕ ਐਚਟੀਐਮਐਲ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਆਈਡੀ ਹੁੰਦੀ ਹੈ ਜੇ ਇਸ ਵਿੱਚ ਆਈਡੀ ਗੁਣ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ.

<span id="myidentifier">Example Text</span>

ਇਸ ਨੂੰ ਚੁਣਨ ਲਈ ਤੁਸੀਂ ਇਕ ਸੀਐਸਐਸ ਚੋਣਕਾਰ ਬਣਾਉਂਦੇ ਹੋ #myidentifier

ਜੇ ਇਕ ਐਚਟੀਐਮਐਲ ਐਲੀਮੈਂਟ ਦੀ ਇਕ ਕਲਾਸ ਹੁੰਦੀ ਹੈ ਤਾਂ ਇਸ ਵਿਚ ਕਲਾਸ ਦਾ ਗੁਣ ਹੋਵੇਗਾ ਜਿਵੇਂ ਕਿ ਇਸ ਉਦਾਹਰਣ ਵਿਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

ਇਸ ਨੂੰ ਚੁਣਨ ਲਈ ਤੁਸੀਂ ਇਕ ਸੀਐਸਐਸ ਚੋਣਕਾਰ ਬਣਾਉਂਦੇ ਹੋ .myclass

ਜੇ ਤੁਸੀਂ ਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਖ਼ਾਸ ਤੱਤ ਨੂੰ ਚੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ myclass ਇਸ ਕੇਸ ਵਿੱਚ ਅਜਿਹਾ ਕਰਨ ਲਈ ਤੁਸੀਂ ਇੱਕ ਸਟੈਂਡਰਡ CSS ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਨੌਵਾਂ ਬੱਚਾ (2) ਚੋਣਕਾਰ ਇਸ ਤਰਾਂ: .myclass:nth-child(2) ਦੂਜੀ ਮਾਈਕਲਾਸ ਦੀ ਮਿਆਦ ਨੂੰ ਚੁਣਨ ਲਈ. ਹਾਲਾਂਕਿ ਇਹ ਸਿਰਫ ਇਸ ਕੇਸ ਵਿੱਚ ਕੰਮ ਕਰੇਗਾ ਕਿਉਂਕਿ ਪੇਰੈਂਟ ਡਿਵ ਐਲੀਮੈਂਟ ਦੇ ਅਧੀਨ ਕੋਈ ਹੋਰ ਤੱਤ ਨਹੀਂ ਹਨ. ਜੇ ਉਦਾਹਰਣ ਲਈ ਏਪੀ ਐਲੀਮੈਂਟ ਸੀ ਤਾਂ ਇਹ ਨੌਵੇਂ ਬੱਚੇ ਦੀ ਸੂਚੀ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ.

ਬਿਨਾਂ ਕਿਸੇ ਵਿਲੱਖਣ ਆਈਡੀ ਜਾਂ ਕਲਾਸ ਦੇ HTML ਐਲੀਮੈਂਟ ਦੀ ਚੋਣ ਕਰੋ

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

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

ਉਦਾਹਰਣ ਦੇ ਲਈ, ਉਦਾਹਰਣ ਵਿੱਚ, ਉਪਰੋਕਤ ਅਸੀਂ ਲਿੰਕ ਦੇ ਅੰਦਰ DIV ਤੱਤ ਦੀ ਚੋਣ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਇੱਕ CSS ਚੋਣਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜੋ ਵਿਲੱਖਣ ਡੀਆਈਵੀ ਤੋਂ ਹੇਠਾਂ ਕੰਮ ਕਰਦਾ ਹੈ Header ਕਲਾਸ.

div.Header a div

CSS ਚੋਣਕਾਰ ਵੈੱਬ ਵਿਕਾਸ ਦੀ ਇੱਕ ਮਿਆਰੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹਨ. ਇਹ ਲੇਖ ਦੀ ਇੱਕ ਚੰਗੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਦਿੰਦਾ ਹੈ CSS ਚੋਣਕਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ.

ਮਲਟੀਪਲ ਮੈਚਿੰਗ ਐਲੀਮੈਂਟਸ ਨੂੰ ਹੈਂਡਲ ਕਰਨਾ

ਜੇ ਮਲਟੀਪਲ ਐਚਟੀਐਮਐਲ ਤੱਤ ਇੱਕ CSS ਚੋਣਕਾਰ ਤੋਂ ਵਾਪਸ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਤੁਸੀਂ ਨਿਸ਼ਾਨਾ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਤੱਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਉਡੀਕ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਸਿਰਫ ਪਹਿਲਾਂ ਮੇਲ ਖਾਂਦਾ ਤੱਤ ਹੀ ਵਰਤੇ ਜਾਣਗੇ. ਹਾਲਾਂਕਿ ਜੇ ਤੁਸੀਂ ਓਹਲੇ ਤੱਤ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਸਾਰੇ ਮੇਲ ਖਾਣ ਵਾਲੇ HTML ਤੱਤ ਲੁਕਾਏ ਜਾਣਗੇ.

ਜੇ ਤੁਸੀਂ ਵੱਖ ਵੱਖ ਆਈਡੀਜ ਜਾਂ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਕਈਂ ਤੱਤਾਂ ਨੂੰ ਲੁਕਾਉਣਾ ਚਾਹੁੰਦੇ ਸੀ ਤਾਂ ਤੁਸੀਂ ਹਰ ਸੀਐਸਐਸ ਚੋਣਕਰਤਾ ਨੂੰ ਕਾਮੇ ਨਾਲ ਵੱਖ ਕਰਕੇ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ. ਇਸ ਲਈ ਉਦਾਹਰਣ ਲਈ ਕਲਾਸ ਅਤੇ ਆਈਡੀ ਦੇ ਉੱਪਰ ਉਦਾਹਰਣ ਨੂੰ ਛੁਪਾਉਣ ਲਈ ਤੁਸੀਂ ਹੇਠ ਲਿਖਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ #myidentifier,.myclass