CSS 属性选择器

ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ HTML ਇਲੈਕਟਰਨਸ ਲਈ ਸਟਾਈਲ ਸੈਟ ਕਰਨਾ

ਅਸੀਂ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਵਾਲੇ HTML ਇਲੈਕਟਰਨਸ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰ ਸਕਦੇ ਹਾਂ。

CSS [attribute] انتخاب کا رول

[attribute] ਚੋਣਕਰਤਾ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਣ।

ਹੇਠ ਦੇ ਉਦਾਹਰਨ ਵਿੱਚ target ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਸਾਰੇ <a> ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਂਦੇ ਹਨ;

ਉਦਾਹਰਣ

a[target] {
  background-color: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS [attribute="value"] ਚੋਣਕਰਤਾ

[attribute="value"] ਚੋਣਕਰਤਾ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਮੁੱਲ ਵਾਲੇ ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਣ।

ਹੇਠ ਦੇ ਉਦਾਹਰਨ ਵਿੱਚ target="_blank" ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਸਾਰੇ <a> ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਂਦੇ ਹਨ:

ਉਦਾਹਰਣ

a[target="_blank"] { 
  background-color: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS [attribute~="value"] ਚੋਣਕਰਤਾ

[attribute~="value"] ਚੋਣਕਰਤਾ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਮੁੱਲ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਸ਼ਬਦ ਚੁਣੇ ਜਾਣ।

ਹੇਠ ਦੇ ਉਦਾਹਰਨ ਵਿੱਚ title ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ "flower" ਸ਼ਬਦ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਸਾਰੇ ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਂਦੇ ਹਨ:

ਉਦਾਹਰਣ

[title~="flower"] {
  border: 5px solid yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਨ ਨਾਲ ਹੇਠ ਲਿਖੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਇਲੈਕਟਰਨਸ ਮੈਚ ਕਰਦੇ ਹਨ: title="flower"、title="summer flower" ਅਤੇ title="flower new"، ਪਰ ਮੈਚ ਨਹੀਂ ਕਰਦੇ: title="my-flower" ਜਾਂ title="flowers"。

CSS [attribute|="value"] ਚੋਣਕਰਤਾ

[attribute|="value"] ਚੋਣਕਰਤਾ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਮੁੱਲ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇਲੈਕਟਰਨਸ ਚੁਣੇ ਜਾਣ।

ਹੇਠ ਦਾ ਉਦਾਹਰਣ class ਪ੍ਰਤੀਯੋਗੀ "top" ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ:

ਟਿੱਪਣੀਆਂ:ਮੁੱਲ ਪੂਰਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਇੱਕਲੇ ਕਿਸਮ ਦਾ, ਉਦਾਹਰਨ ਲਈ class="top" ਜਾਂ ਖ਼ਾਸੀ ਮਿਸਾਲ ਵਜੋਂ class="top-text"。

ਉਦਾਹਰਣ

[class|="top"] {
  background: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS [attribute^="value"] ਚੋਣਕਰਤਾ

[attribute^="value"] ਚੋਣਕਰਤਾ ਪ੍ਰਤੀਯੋਗੀ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ class ਪ੍ਰਤੀਯੋਗੀ "top" ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ:

ਸਲਾਹਮੁੱਲ ਪੂਰੀ ਸ਼ਬਦ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ!

ਉਦਾਹਰਣ

[class^="top"] {
  background: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS [attribute$="value"] ਚੋਣਕਰਤਾ

[attribute$="value"] ਚੋਣਕਰਤਾ ਪ੍ਰਤੀਯੋਗੀ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਦੇ ਨਾਲ ਮੁਕਮਲ ਹੋਣ ਵਾਲੇ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ class ਪ੍ਰਤੀਯੋਗੀ "test" ਨਾਲ ਮੁਕਮਲ ਹੁੰਦਾ ਹੈ:

ਸਲਾਹਮੁੱਲ ਪੂਰੀ ਸ਼ਬਦ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ!

ਉਦਾਹਰਣ

[class$="test"] {
  background: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

CSS [attribute*="value"] ਚੋਣਕਰਤਾ

[attribute*="value"] ਚੋਣਕਰਤਾ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਸ਼ਬਦ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ class ਪ੍ਰਤੀਯੋਗੀ "te" ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:

ਸਲਾਹਮੁੱਲ ਪੂਰੀ ਸ਼ਬਦ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ!

ਉਦਾਹਰਣ

[class*="te"] {
  background: yellow;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਫਾਰਮ ਸਟਾਈਲ ਸੈਟ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਕਲਾਸ ਜਾਂ id ਰਹਿਤ ਫਾਰਮ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਅਤਿਰਿਕਤ ਪ੍ਰਤੀਯੋਗੀ ਕਿਸਮਤ ਕਾਫੀ ਲਾਭਦਾਇਕ ਹੋਵੇਗੀ:

ਉਦਾਹਰਣ

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਸਲਾਹਸਾਡੇ ਦੌਰੇ ਉੱਤੇ ਦੇਖੋ CSS ਫਾਰਮ ਸਿਖਾਰਾ، ਜਿਆਦਾ ਜਾਣਕਾਰੀ ਲਈ CSS ਫਾਰਮ ਸਟਾਈਲਿੰਗ ਸਿੱਖੋ。

ਸਾਰੇ CSS ਅਤਿਰਿਕਤ ਪ੍ਰਤੀਯੋਗੀ

ਚੋਣਕਰਤਾ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
[attribute] [target] ਚੁਣੋ ਹਰ ਏਕ ਐਲੀਮੈਂਟ ਜਿਸ ਦਾ target ਪ੍ਰਤੀਯੋਗੀ ਹੋਵੇ。
[attribute=value] [target=_blank] ਚੁਣੋ ਹਰ ਏਕ ਐਲੀਮੈਂਟ ਜਿਸ ਦਾ target="_blank" ਪ੍ਰਤੀਯੋਗੀ ਹੋਵੇ。
[attribute~=value] [title~=flower] ਚੁਣੋ ਹਰ ਏਕ ਐਲੀਮੈਂਟ ਜਿਸ ਦਾ title ਪ੍ਰਤੀਯੋਗੀ "flower" ਸ਼ਬਦ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇ。
[attribute|=value] [lang|=en] ਚੁਣੋ ਜਿਸ ਐਲੀਮੈਂਟ ਦਾ lang ਪ੍ਰਤੀਯੋਗੀ "en" ਨਾਲ ਸ਼ੁਰੂ ਹੋਵੇ。
[attribute^=value] a[href^="https"] ਚੁਣੋ ਹਰ ਏਕ <a> ਐਲੀਮੈਂਟ ਜਿਸ ਹ੍ਰੇਫ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ "https" ਨਾਲ ਸ਼ੁਰੂ ਹੋਵੇ。
[attribute$=value] a[href$=".pdf"] ਚੁਣੋ ਜਿਸ ਹ੍ਰੇਫ ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ".pdf" ਨਾਲ ਮੁਕਮਲ ਹੋਵੇ ਹਰ ਏਕ <a> ਐਲੀਮੈਂਟ。
[attribute*=value] a[href*="codew3c"] href کی اپنی خاصیت میں "codew3c" کا زیر داڑھی شامل ہونے والی ہر <a> علامت کو انتخاب کریں。

بڑھتی ہوئی پڑھائی

بیرونی کتاب:CSS انتخاب کا رول