Pseudo-element ng CSS

Ano ang pseudo-elemento?

Ang CSS pseudo-elemento ay ginagamit para magtakda ng estilo ng tinukoy na bahagi ng elemento.

Halimbawa, ito ay maaaring gamitin sa:

  • magtakda ng estilo ng unang titik at unang linya ng elemento
  • magdagdag ng nilalaman bago o pagkatapos ng nilalaman ng elemento

Pagkakasulat

Ang pagkakasulat ng pseudo-elemento:

selector::pseudo-element {
  property: value;
}

::first-line pseudo-elemento

::first-line Ang pseudo-elemento ay ginagamit para magdagdag ng espesyal na estilo sa unang linya ng teksto.

Ang mga halimbawa na ito ay nagtatakda ng estilo sa unang linya ng lahat ng <p> na elemento:

Halimbawa

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Subukan nang personal

Pansin:::first-line Ang pseudo-elemento ay ginagamit lamang para sa mga bloke na elemento.

Ang mga sumusunod na attribute ay ginagamit para sa: ::first-line pseudo-elemento:

  • 属性 font
  • 属性 kulay
  • 属性 background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Pansin mo:dalawang tuldok na pagkakasulat - ::first-line pagkakalimbag :first-line

Sa CSS3, ang dalawang tuldok na pagkakasulat ay pinalitan ang unang tuldok na pagkakasulat ng pseudo-elemento. Ito ay sinubukan ng W3C na magiba ang pagkakaibapseudo-classatpseudo-elementong pagsubok.

Sa CSS2 at CSS1, ang pseudo-class at pseudo-elemento ay gumagamit ng unang tuldok na pagkakasulat.

Para sa pagiging magkakaayon sa nakaraan, ang CSS2 at CSS1 pseudo-elemento ay tatanggapin ang unang tuldok na pagkakasulat.

::first-letter pseudo-elemento

::first-letter Ang pseudo-elemento ay ginagamit para magdagdag ng espesyal na estilo sa unang titik ng teksto.

Ang mga halimbawa na ito ay nagtatakda ng format ng unang titik ng lahat ng <p> na elemento sa Chinese text:

Halimbawa

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Subukan nang personal

Pansin:::first-letter Ang pseudo-elemento ay ginagamit lamang para sa mga bloke na elemento.

Ang mga katangian na ito ay ginagamit para sa pseudo-elemento ::first-letter:

  • 属性 font
  • 属性 kulay
  • 属性 background
  • 属性 labas
  • 属性 panloob
  • 属性 ngalaw
  • text-decoration
  • vertical-align (lamang kapag "float" ay "none")
  • text-transform
  • line-height
  • float
  • clear

Pangwalang-loob na elemento at CSS na klase

Ang pangwalang-loob na elemento ay maaaring gamitin kasama ang CSS na klase:

Halimbawa

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Subukan nang personal

Ang sumusunod na halimbawa ay magpapakita ng unang titik ng paragrapo na may klase "intro" sa kulay ng pula at malaki.

Maraming pangwalang-loob na elemento

Maaari ring kumombinahin ang ilang pangwalang-loob na elemento.

Sa sumusunod na halimbawa, ang unang titik ng paragrapo ay magiging pula at ang laki ng font ay xx-large. Ang ibang bahagi ng unang linya ay magiging asul at gamit ang maliliit na kapital. Ang ibang bahagi ng paragrapo ay magiging default na laki ng font at kulay:

Halimbawa

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Subukan nang personal

CSS - ::before pangwalang-loob na elemento

::before Ang pangwalang-loob na elemento ay maaaring gamitin para magdagdag ng ilang nilalaman bago ang nilalaman ng elemento.

Ang sumusunod na halimbawa ay magdagdag ng isang larawan bago ang nilalaman ng bawat <h1> elemento:

Halimbawa

h1::before {
  content: url(smiley.gif);
}

Subukan nang personal

CSS - ::after pangwalang-loob na elemento

::after Ang pangwalang-loob na elemento ay maaaring gamitin para magdagdag ng ilang nilalaman pagkatapos ng nilalaman ng elemento.

Ang sumusunod na halimbawa ay magdagdag ng isang larawan pagkatapos ng nilalaman ng bawat <h1> elemento:

Halimbawa

h1::after {
  content: url(smiley.gif);
}

Subukan nang personal

CSS - ::selection pangwalang-loob na elemento

::selection pangwalang-loob na elemento na tumutugma sa bahagi ng napiling elemento ng user.

Ang sumusunod na CSS na attribute ay maaaring gamitin para sa ::selection:

  • color
  • background
  • cursor
  • outline

Ang sumusunod na halimbawa ay nagpapakita ng napiling teksto na magiging pula sa kulay ng bakod na dilaw:

Halimbawa

::selection {
  color: red; 
  background: yellow;
}

Subukan nang personal

Lahat ng CSS pangwalang-loob na elemento

Selector Halimbawa Paglalarawan ng halimbawa
::after p::after Magdagdag ng nilalaman pagkatapos ng bawat <p> elemento.
::before p::before Magdagdag ng nilalaman bago ang bawat <p> elemento.
::first-letter p::first-letter Piliin ang unang titik ng bawat <p> elemento.
::first-line p::first-line Piliin ang unang linya ng bawat <p> elemento.
::selection p::selection Bumili ng bahagi ng elemento na pinili ng user.

Lahat ng CSS pseudelemento

Selector Halimbawa Paglalarawan ng halimbawa
:active a:active Bumili ng bawat aktibong link.
:checked input:checked Bumili ng bawat <input> elemento na napili.
:disabled input:disabled Bumili ng bawat <input> elemento na hindi pinagana.
:empty p:empty Bumili ng bawat <p> elemento na walang anak.
:enabled input:enabled Bumili ng bawat <input> elemento na pinagana.
:first-child p:first-child Bumili ng bawat <p> elemento na pinakauna ng kaniyang magulang.
:first-of-type p:first-of-type Bumili ng bawat <p> elemento na pinakauna ng kaniyang magulang.
:focus input:focus Bumili ng bawat <input> elemento na may focus.
:hover a:hover Bumili ng bawat link na nasa ilalim ng mouse.
:in-range input:in-range Bumili ng bawat <input> elemento na may halaga sa saklaw ng mga itinalaga na halaga.
:invalid input:invalid Bumili ng bawat <input> elemento na mayroong walang kabuluhan na halaga.
:lang(language) p:lang(it) Bumili ng bawat <p> elemento na ang halaga ng kaniyang attribute lang ay nagsisimula sa "it".
:last-child p:last-child Bumili ng bawat <p> elemento na pinakahuling anak ng kaniyang magulang.
:last-of-type p:last-of-type Bumili ng bawat <p> elemento na pinakahuling elemento ng kaniyang magulang <p>.
:link a:link Bumili ng bawat link na hindi napasukan.
:not(selector) :not(p) Bumili ng bawat elemento na hindi <p>.
:nth-child(n) p:nth-child(2) Bumili ng bawat <p> elemento na pangalawang anak ng kaniyang magulang.
:nth-last-child(n) p:nth-last-child(2) Bumili ng bawat <p> elemento na pangalawang anak ng kaniyang magulang, mula sa pinakahuling anak.
:nth-last-of-type(n) p:nth-last-of-type(2) Select each <p> element that is the second child of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Select each <p> element that is the second <p> element of its parent.
:only-of-type p:only-of-type Select each <p> element that is the only <p> element of its parent.
:only-child p:only-child Select <p> elements that are the only child of their parent.
:optional input:optional Select <input> elements that do not have the "required" attribute.
:out-of-range input:out-of-range Select <input> elements whose values are out of the specified range.
:read-only input:read-only Select <input> elements that have specified the "readonly" attribute.
:read-write input:read-write Select <input> elements without the "readonly" attribute.
:required input:required Select <input> elements that have specified the "required" attribute.
:root root Select the root element of an element.
:target #news:target Select the current active #news element (click on the URL containing the anchor name).
:valid input:valid Select all <input> elements with valid values.
:visited a:visited Select all visited links.