CSS అట్రిబ్యూట్ సెలెక్టర్

ప్రత్యేక అనుబంధం కలిగిన హెచ్చిన మెటాడాటా శైలిని మార్చడానికి ఉపయోగించవచ్చు

ప్రత్యేక అనుబంధం లేదా అనుబంధం విలువ కలిగిన హెచ్చిన మెటాడాటా శైలిని మార్చవచ్చు.

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;
}

స్వయంగా ప్రయత్నించండి

ఫారమ్ స్టైలింగ్ అమర్చండి

క్లాస్ లేదా ఐడి లేని ఫారమ్స్ ను స్టైల్ చేయడానికి అట్రిబ్యూట్ సెలెక్టర్స్ ఉపయోగపడతాయి:

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

సూచన:మా వెబ్సైట్ నివసించండి. CSS ఫారమ్ ట్యూటోరియల్మరింత కలిగిన సమాచారం కోసం చూడండి.

అన్ని సిఎస్ఎస్ అట్రిబ్యూట్ సెలెక్టర్స్

సెలెక్టర్ ఉదాహరణ ఉదాహరణ వివరణ
[attribute] [target] టార్గెట్ అంతర్జాతకం కలిగిన అన్ని ఎలిమెంట్లను ఎంపిక చేయండి.
[attribute=value] [target=_blank] టార్గెట్="_blank" అంతర్జాతకం కలిగిన అన్ని ఎలిమెంట్లను ఎంపిక చేయండి.
[attribute~=value] [title~=flower] టైటిల్ అంతర్జాతకం "flower" పదాన్ని కలిగివున్న అన్ని ఎలిమెంట్లను ఎంపిక చేయండి.
[attribute|=value] [lang|=en] లాంగ్ అంతర్జాతకం ముగించే "en" ప్రారంభం అన్ని ఎలిమెంట్లను ఎంపిక చేయండి.
[attribute^=value] a[href^="https"] హెరిఫ్ అంతర్జాతకం ముగించే ప్రతి ఎల్లి మెటా ఎలిమెంట్ను ఎంపిక చేయండి.
[attribute$=value] a[href$=".pdf"] ఎండి హెరిఫ్ అంతర్జాతకం ముగించే ప్రతి ఎల్లి మెటా ఎలిమెంట్ను ఎంపిక చేయండి.
[attribute*=value] a[href*="codew3c"] 选择其 href 属性值包含子串 "codew3c" 的每个 元素。

延伸阅读

课外书：CSS అట్రిబ్యూట్ సెలెక్టర్స్ వివరణ