Mga Selector ng CSS

Mga Selector ng CSS

Ang CSS selector ay ginagamit para sa 'hanapin' (o pumili) ng HTML elementong itatawag na mag-apply ng estilo.

Maaari naming hatulan ang CSS selector sa limang klase:

  • Simple selector (Pumili ng elemento base ayon sa pangalan, id, o klase)
  • Kompositor selector(Pumili ng elemento base ayon sa partikular na relasyon sa ibang elemento)
  • Pseudo-class selector(Pumili ng elemento base sa pamamagitan ng partikular na estado)
  • Pseudo-element selector(Pumili ng bahagi ng elemento at itatakda ang estilo)
  • Atributo selector(Pumili ng elemento base sa pamamagitan ng atributo o halagang atributo)

Ang pahina na ito ay magtuturo sa pinakababang CSS selector.

CSS Element Selector

Ang element selector ay pinili ang HTML na may pangalang element.

Halimbawa

Dito, ang lahat ng <p> na elementong nasa pahina ay magiging center na itaas at may red na kulay ng teksto:

p {
  text-align: center;
  color: red;
}

Subukan ang iyong sarili

CSS id selector

Ang id selector ay ginagamit upang piliin ang partikular na elementong gumagamit ng id attribute ng HTML element.

Ang id ng elementong ito ay walang kapareho sa pahina, kaya ginagamit ang id selector upang piliin ang isang nag-iisang element!

Kung gusto mong piliin ang elementong may partikular na id, isulat ang isang titik na puno (＃), pagkatapos ay ang id ng elementong iyon.

Halimbawa

Ang CSS na ito ay magiging applicable sa HTML elementong may id="para1":

#para1 {
  text-align: center;
  color: red;
}

Subukan ang iyong sarili

Pagsasabihan:Ang pangalan ng id ay hindi pwedeng magsimula sa numero.

CSS class selector

Ang klase selector ay pinili ang HTML na may partikular na klase attribute.

Kung gusto mong piliin ang elementong may partikular na klase, isulat ang isang titik na puno (.), pagkatapos ay ang pangalan ng klase.

Halimbawa

Sa katulad na halimbawa, ang lahat ng HTML na may class="center" ay magiging pula at magiging center na itaas ang estilo:

.center {
  text-align: center;
  color: red;
}

Subukan ang iyong sarili

Maaari rin mong tukuyin na lamang ang mga partikular na HTML na mga elementong gagamitin ang estilong ito.

Halimbawa

Sa katulad na halimbawa, lamang ang <p> na may class="center" na elementong gagamitin ang estilong ito:

p.center {
  text-align: center;
  color: red;
}

Subukan ang iyong sarili

Maaaring gamitin ng HTML na mga elementong maraming klase.

Halimbawa

Sa katulad na halimbawa, ang <p> na elementong ito ay gagamitin ang estilo ng class="center" at class="large":

<p class="center large">Ang pahayag na ito ay binibigyang estilong gumagamit ng dalawang klase.</p>

Subukan ang iyong sarili

Pagsasabihan:Ang pangalan ng klase ay hindi pwedeng magsimula sa numero!

CSS universal selector

Universal selector (*). Pinili ang lahat ng HTML na mga elementong nasa pahina.

Halimbawa

Ang mga CSS na ito ay makakaapekto sa lahat ng HTML na mga elementong nasa pahina:

* {
  text-align: center;
  color: blue;
}

Subukan ang iyong sarili

CSS grouped selector

Pinili ng grouped selector ang lahat ng HTML na may magkaparehong definisyon ng estilo.

Makikita sa ibaba ang CSS kodigong ito (h1, h2 at p na mga elementong may magkaparehong definisyon ng estilo):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Kailangan mag-isagupitan ang mga selector upang mas mabawasan ang bilang ng kodigong kailangan.

Kung gusto mong isagupitan ang mga selector, gamitin ang kumpos ng komo na maghihiwalay ang bawat selector.

Halimbawa

Sa katulad na halimbawa, pinagkakasunduang ang selector ng itaas na kodigong ito:

h1, h2, p {
  text-align: center;
  color: red;
}

Subukan ang iyong sarili

Lahat ng simpleng CSS selector

Selector Halimbawa Paglalarawan ng Halimbawa
.class .intro Piliin ang lahat ng elementong may class="intro".
#id #firstname Select the element with id="firstname".
* * Select all elements.
element p Select all <p> elements.
element,element,.. div, p Select all <div> elements and all <p> elements.

Further Reading

Supplementary Reading:CSS Element Selector

Supplementary Reading:CSS Selector Grouping

Supplementary Reading:CSS Class Selector Explanation

Supplementary Reading:CSS ID Selector Explanation

Supplementary Reading:CSS Attribute Selector Explanation

Supplementary Reading:CSS Descendant Selector

Supplementary Reading:CSS Child Element Selector

Supplementary Reading:CSS Adjacent Sibling Selector