CSS kompositor

CSS kompositor

Ang kompositor ay isang mekanismo na nagpapaliwanag ng relasyon sa pagitan ng selector.

Maaaring may ilang simple selector ang maaaring kasama sa CSS selector. Sa pagitan ng simple selector, maaaring kasama ang kompositor.

May apat na magkakaibang kompositor sa CSS:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • Universal sibling selector (~)

Descendant selector

Ang descendant selector ay tumutugma sa lahat ng element na nasa ilalim at ang ilalim ng tinukoy na element.

Ang mga sumusunod na halimbawa ay pinili ang lahat ng <p> element sa loob ng <div> element:

Halimbawa

div p {
  background-color: yellow;
}

Subukan nang personal

Child selector

Ang child selector ay tumutugma sa lahat ng element na nasa ilalim ng tinukoy na element.

Ang mga sumusunod na halimbawa ay pinili ang lahat ng <p> element na nasa ilalim ng <div> element:

Halimbawa

div > p {
  background-color: yellow;
}

Subukan nang personal

Adjacent sibling selector

Ang adjacent sibling selector ay tumutugma sa lahat ng同级 element na nasa malapit sa tinukoy na element.

Ang mga sibling (同级) element ay dapat may magkakaparehong magulang element. Ang 'malapit' ay nangangahulugan na 'sumusunod'.

Ang mga sumusunod na halimbawa ay pinili ang lahat ng <p> element na sumusunod sa <div> element:

Halimbawa

div + p {
  background-color: yellow;
}

Subukan nang personal

Universal sibling selector

Ang universal sibling selector ay tumutugma sa lahat ng同级 element na nasa ilalim ng tinukoy na element.

Ang mga sumusunod na halimbawa ay pinili ang lahat ng <p> element na同级 sa <div> element:

Halimbawa

div ~ p {
  background-color: yellow;
}

Subukan nang personal

Lahat ng CSS combination selector

Selector Halimbawa Halimbawa ng paglalarawan
element element div p Piliin ang lahat ng <p> element sa loob ng <div> element.
element>element div > p Select all <p> elements whose parent element is a <div> element.
element+element div + p Select all <p> elements that follow an immediate <div> element.
element1~element2 p ~ ul Select each <ul> element that has a preceding <p> element.

Further Reading

Supplementary Books:CSS Descendant Selector

Supplementary Books:CSS Child Element Selector

Supplementary Books:CSS Adjacent Sibling Selector