ID Selector ng CSS

Id selector

Ang id selector ay maaaring itakda ang espesyal na estilo para sa HTML elementong may partikular na id.

Ang id selector ay tinatawag na "#" na magtatagpo.

Ang dalawang id selector na ito, ang unang isa ay maaaring itakda ang kulay ng elemento bilang pulang lupa, at ang ikalawang isa ay maaaring itakda ang kulay bilang berde:

#red {color:red;}
#green {color:green;}

Sa HTML code na ito, ang p element na may attribute na red ay magiging pulang lupa, at ang p element na may attribute na green ay magiging berde.

<p id="red">Ang paragrapong ito ay pulang lupa.</p>
<p id="green">Ang paragrapong ito ay berde.</p>

Babala:Ang id attribute ay puwedeng lumitaw sa bawat HTML dokumento ng isang beses lamang. Gusto mong malaman ang dahilan, mangyaring basahin XHTML: pagre-reconstruct ng websayt.

Id selector at derivative selector

Sa modernong layout, ang id selector ay kalimitang ginagamit upang gumawa ng derivative selector.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Ang estilong ito ay magiging maaring gamitin lamang para sa mga paragrapong lumitaw sa loob ng elemento na may id na sidebar. Ang elemento na ito ay maaaring maging div o cell ng talahanapan, kahit na ito ay maaaring maging ibang talahanapan o block element. Maaari itong maging inline element, tulad ng <em></em> o <span></span>, ngunit ang paggamit na ito ay ilegal dahil wala kaya upang ilagay ang <p> sa loob ng inline element <span> (kung naka-alala ka ng dahilan, mangyaring basahin XHTML: pagre-reconstruct ng websayt）。

Isang selector, maraming paggamit

Kahit na ang mga elemento na may tag na sidebar ay puwedeng lumitaw sa dokumento ng isang beses lamang, ang id selector bilang derivative selector ay maaaring gamitin nang maraming beses:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Dito, ang p element sa sidebar na malinaw na iba sa iba pang p element sa pahina, ang p element sa sidebar ay nagkaroon ng espesyal na pagtratrabaho, at ang h2 element sa sidebar na malinaw na iba sa iba pang h2 element sa pahina ay nagkaroon ng iba pang espesyal na pagtratrabaho.

Mag-isa na Selector

Ang ID selector kahit hindi ginagamit sa paglikha ng derived selector, ay maaaring gumana nang mag-isa:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Ayon sa patakaran na ito, ang elemento na may id na sidebar ay magkaroon ng 1 pixel na brownstone border at may 10 pixel na internal padding (padding, internal space). Ang lumang bersyon ng Windows/IE browser ay maaaring ayusin ang patakaran na ito, maliban na lamang kung ikaw ay nagbigay ng partikular na paglilinaw sa elemento na may selector na ito:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Kaugnay na nilalaman

Kung kailangan mong mas mabuti na matuto tungkol sa ID selector, basahin ang advanced tutorial ng CodeW3C.com:Detalye ng ID Selector ng CSS.