Detalye ng Attribute Selector ng CSS

Ang CSS 2 ay nagpasimula ng attribute selector.

Ang selector sa atyakang pangkat ay maaaring piliin ang elemento ayon sa kanyang katangian at halaga ng katangian.

Simple Attribute Selector

Kung gusto mong piliin ang elemento na may isang katangian, kahit anong halaga ng katangian, maaari mong gamitin ang simple attribute selector.

Halimbawa 1

Kung gusto mong palitan ang lahat ng elemento na may title sa kulay red, maaari mong gumawa ng:

*[title] {color:red;}

Try it yourself

Halimbawa 2

Katulad ng ito, maaari mong ilagay ang estilo sa tanging anchor (a element) na may href attribute:

a[href] {color:red;}

Try it yourself

Halimbawa 3

Maaari mong piliin ayon sa ilang mga katangian, sa pamamagitan ng pagkakasunud-sunod ng selector sa atyakang pangkat.

Halimbawa, upang itakda ang teksto ng HTML hyperlink na may kaparehong href at title katangian bilang kulay pula, maaari itong isulat nang ganito:

a[href][title] {color:red;}

Try it yourself

Halimbawa 4

Maaari nang gamitin ang katangian na ito sa ilang kreatibong paraan.

Halimbawa, maaari mong gamitin ang katangian na ito upang mag-aplay ng estilo sa lahat ng imahe na may alt katangian, upang ipahayag ang mga epektibong imahe:

img[alt] {border: 5px solid red;}

Try it yourself

Tip:Ang partikular na ito ay mas gugustuhing gamitin para sa pagdiagnosa kaysa sa disenyo, halimbawa, para pagtiyakin kung ang imahe ay tunay na may epekto.

Halimbawa 5: Gamitin ang attribute selector sa XML dokumento

Ang attribute selector ay napaka-mahalaga sa mga XML dokumento, dahil ang XML wika ay nagbibigay-diin sa paglalarawan ng gamit ng mga elemento at mga katangian ng elemento.

Kung pinaglalarawan namin ang isang XML dokumento na naka-disenyo para sa mga planeta ng Solar System, kung gusto naming piliin ang lahat ng planet elementong may moons katangian at ipakita ito bilang kulay pula upang mas mabuti ang atensyon sa mga planeta na may moons, maaari itong isulat nang ganito:

planet[moons] {color:red;}

Ito ay magpapakita ng teksto ng ikalawa at ikatlong elemento sa mga tag na ito bilang kulay pula, ngunit ang teksto ng unang elemento ay hindi kulay pula:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Tingnan ang epekto

Pagpili ayon sa partikular na halaga ng katangian

Bukod sa pagpili ng mga elemento na may ilang mga katangian, maaari pa ring mas kumikilala ang saklaw ng pili, at piliin lamang ang mga elemento na may mga katangian na may partikular na halaga.

Halimbawa 1

Halimbawa, kung gusto mong palitan ang kulay ng teksto ng hyperlink na nagsasailalim sa isang naaangkop na dokumento sa web server sa kulay pula, maaari itong isulat nang ganito:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Try it yourself

Halimbawa 2

Katulad ng simple attribute selector, maaaring ihahalintulad ang ilang attribute-value selector upang piliin ang isang dokumento.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Hinihila nito ang unang teksto ng hyperlink na nasa mga tag na ito sa kulay pula, ngunit ang ikalawa o ikatlong link ay hindi na apektado:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Try it yourself

Halimbawa 3

Parehong, ang wika ng XML ay maaaring gamitin ang ganitong pamamaraan upang itakda ang estilo.

Sa susunod, bumalik tayo sa halimbawa ng planet. Pagkatapos, kung gusto nating piliin lamang ang mga elemento ng planet na may halaga ng moons na 1:

planet[moons="1"] {color: red;}

Ang sumusunod na kodigo ay gagawin ng maaring magiging kulay red ang ikalawang elemento ng sumusunod na tag, ngunit ang unang at ikatlong elemento ay hindi apektado:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Tingnan ang epekto

Ang katangian at ang halaga ng katangian ay dapat na kumpletong tumutugma.

Pansin na ang formatong ito ay dapat na kumpletong tumutugma sa halaga ng atributo.

Kung ang halaga ng atributo ay naglalaman ng listahan ng halaga na pinaghihiwalay ng espasyo, maaaring lumabas ng problema ang pagtugma.

Isaalang-alang ang sumusunod na markahan na bahagi:

<p class="important warning">Ang paragrapong ito ay isang napaka-mahalagang babala.</p>

Kung itong isulat na p[class="important"], ang patakaran na ito ay hindi makakapili ng halimbawa na tag.

Upang piliin ang elemento na may tiyak na halaga ng atributo, dapat itong isulat:

p[class="important warning"] {color: red;}

Try it yourself

Pang-pangkat na piliin ng bahaging pang-atributo

Kung kailangan mong piliin ang isang salita mula sa listahan ng mga salita ng halaga ng atributo, kailangan gamitin ang tanda ng tilde (~).

Kung gusto mong piliin ang mga elemento na may class na naglalaman ng 'important', maaaring gamitin ang sumusunod na piliin:

p[class~="important"] {color: red;}

Try it yourself

Kung pinagwala ang tilde (~), ibig sabihin na kailangan ng kumpletong pagtutugma ng halaga.

Ang pagkakaiba ng bahaging piliin ng bahaging pang-atributo at pinalamang pangalan ng klase.

Ang piliin na ito ay katumbas ng pinalamang pangalan ng klase na pinag-uusapan namin sa klase na piliin.

Ibig sabihin, ang p.important at p[class="important"] ay katumbas kapag ginagamit sa HTML dokumento.

Tungkol sa "~=" na piliin ang atibay, bakit pa ito ay ginagamit para sa anumang katangian, hindi lamang para sa class?

Halimbawa, maaaring magkaroon ng dokumento na may malaking bilang ng mga imahe, ngunit tanging ilan lamang ang mga imahe. Para dito, maaaring gamitin ang isang pang-pangkat na piliin ang bahagi ng dokumento na nakabase sa title:

img[title~="Figure"] {border: 1px solid gray;}

This rule will select all images that contain the text "Figure" in the title. Images without the title attribute or the title attribute does not contain "Figure" will not match.

Try it yourself

Substring Matching Attribute Selector

Next, I introduce a more advanced selector module that was released after CSS2 was completed. It includes more partial value attribute selectors. According to the specification, it should be called "Substring Matching Attribute Selector".

Many modern browsers support these selectors, including IE7.

The following table is a simple summary of these selectors:

Type Paglalarawan
[abc^="def"] Select all elements that start with "def" in the abc attribute value
[abc$="def"] Select all elements that end with "def" in the abc attribute value
[abc*="def"] Select all elements that contain the substring "def" in the abc attribute value

You can imagine that these selectors have many uses.

For example, if you want to apply styles to all links pointing to CodeW3C.com, you do not need to specify a class for all these links and write styles based on this class. Just write the following rule instead:

a[href*="codew3c.com"] {color: red;}

Try it yourself

Tip:Any attribute can use these selectors.

Specific Attribute Selector Type

Finally, I introduce a specific attribute selector. Please see the following example:

*[lang|="en"] {color: red;}

This rule will select all elements with the lang attribute equal to en or starting with en-. Therefore, the first three elements in the following example markup will be selected, and the last two elements will not be selected:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Try it yourself

Generally, [att|="val"] can be used for any attribute and its value.

Suppose there is a series of images in an HTML document, each with a filename like figure-1.jpg and figure-2.jpgYou can use the following selector to match all these images:

img[src|="figure"] {border: 1px solid gray;}

Try it yourself

Of course, the most common use of this attribute selector is to match language values.

Sanggunian ng Selector ng CSS

Selector Paglalarawan
[katangian] Ginagamit upang piliin ang elemento na may katangian na tinukoy.
[katangian=halaga] Ginagamit upang piliin ang elemento na may katangian at halaga na tinukoy.
[katangian~=halaga] Ginagamit upang piliin ang elemento na naglalaman ng tinukoy na halaga sa katangian.
[katangian|=halaga] Ginagamit upang piliin ang elemento na may katangian na naglalaman ng tinukoy na halaga na dapat ay buong salita.
[katangian^=halaga] Tumatugma ang bawat elemento na naglalaman ng tinukoy na halaga sa simula ng halaga.
[katangian$=halaga] Tumatugma ang bawat elemento na naglalaman ng tinukoy na halaga sa dulo ng halaga.
[katangian*=halaga] Tumatugma ang bawat elemento na naglalaman ng tinukoy na halaga sa bawat katangian.