Manwal ng Pseudoklas ng CSS

CSS Pseudoclass

Ang pseudoclass ay ginagamit upang tukuyin ang espesyal na estado ng elemento.

Halimbawa, ito ay maaaring gamitin para sa:

  • I-set ang estilo kapag ang mouse ay nasa ibabaw ng elemento.
  • I-set ang iba't-ibang estilo para sa na-visited at hindi na-visited na link.
  • I-set ang estilo kapag ang elemento ay nabubuo ng fokus.
  • I-set ang estilo para sa effective/invalid/required/optional na form elements.

Ang sumusunod na talahanayan ay nagpapakita ng iba't-ibang pseudoclass sa CSS:

Pseudoclass Halimbawa Halimbawa ng paglalarawan
:active a:active Piliin ang aktibong link.
:any-link a:anylink Piliin ang lahat ng <a> o <area> element na may href attribute.
:auto-fill input:autofill Piliin ang lahat ng <input> element na na-fill up ng browser na awtomatikong halaga.
:checked option:checked Match ang lahat ng na-selected na <input> o <option> element.
:default input:default Piliin ang lahat ng default na form element sa isang grupo ng kaugnay na elemento.
:defined :defined Piliin ang lahat ng na-defined na elemento (standard o na-taasang elemento).
:dir() :dir(rtl) Piliin ang lahat ng elemento na may tinukoy na text direction.
:disabled option:disabled Piliin ang lahat ng na-disable na elemento, ginamit pang-form elements.
:empty div:empty Piliin ang lahat ng elemento na walang mga anak (kasama ang text node).
:enabled input:enabled Piliin ang lahat ng pinagana na elemento, kalimitan ginagamit sa form element.
:first @page :first Ipakita ang unang pahina ng dokumentong print (ginagamit kasama ang @page rule).
:first-child p:first-child Piliin ang elemento na nasa unang anak ng kanyang pangkalakal na elemento (sa grupo ng kapatid).
:first-of-type li:first-of-type Piliin ang unang elemento ng partikular na uri sa grupo ng kapatid.
:focus select:focus Piliin ang elemento na nakuha ang focus, kalimitan ginagamit sa form element.
:focus-visible button:focus-visible Piliin ang elemento na nakuha ang focus (gagamitin lamang ang estilo ng focus sa pamamagitan ng keyboard at hindi ng mouse).
:focus-within form:focus-within Match ang elemento o anumang banyagang anak nito na nakuha ang focus.
:fullscreen :fullscreen Piliin ang elemento na kasalukuyang nasa fullscreen mode.
:has() h2:has(+p) Piliin ang <h2> elemento na sumusunod sa <p> elemento at ilagay ang estilo sa <h2>.
:hover a:hover Piliin ang elemento na nasa hover ng mouse.
:in-range input:in-range Piliin ang <input> elemento na may halaga sa nakatakdang saklaw.
:indeterminate input:indeterminate Piliin ang elemento na nasa indeterminate estado ng form.
:invalid input:invalid Piliin ang hindi wastong form element.
:is() :is(ul, ol) 选择所有 <ul> 和 <ol> 元素。
:lang() p:lang(it) Piliin ang <p> elemento na may lang attribute na "it" (Italyano).
:last-child li:last-child Piliin ang <li> elemento na nasa huling anak ng kanyang pangkalakal na elemento.
:last-of-type p:last-of-type Piliin ang <p> elemento na nasa huling elemento ng kanyang pangkalakal na elemento.
:left @page :left Ipakita ang lahat ng kaliwang pahina ng dokumentong print (ginagamit kasama ang @page rule).
:link a:link Piliin ang lahat ng hindi binisita na link.
:modal :modal Piliin ang elemento na nasa estado ng modal.
:not() :not(p) Piliin ang lahat ng elemento na hindi <p> elemento.
:nth-child() p:nth-child(2) Piliin ang <p> elemento bilang pangalawang anak ng kanyang pangkalakal na elemento.
:nth-last-child() p:nth-last-child(2) Piliin ang <p> element na ikalawa sa huling anak element ng kanyang magulang element.
:nth-last-of-type() p:nth-last-of-type(2) Piliin ang <p> element na ikalawa sa huling anak element ng kanyang magulang element.
:nth-of-type() p:nth-of-type(2) Piliin ang <p> element na ikalawa sa kanyang magulang element.
:only-child p:only-child Piliin ang <p> element na pinakamainam na anak element ng kanyang magulang element.
:only-of-type p:only-of-type Piliin ang <p> element na pinakamainam na element ng pangilang <p> ng kanyang magulang element.
:optional textarea:optional Piliin ang <input>, <select> o <textarea> element na walang required attribute.
:out-of-range input:out-of-range Piliin ang <input> element na ang halaga ay labas ng tinukoy na saklaw.
:placeholder-shown input:placeholder-shown Piliin ang <input> o <textarea> element na ipinapakita ang placeholder text.
:popover-open :popover-open Piliin ang element na nasa estado ng ipinapakita ang popup.
:read-only input:read-only Piliin ang input element na may readonly attribute.
:read-write input:read-write Piliin ang editble input element.
:required input:required Piliin ang input element na may required attribute.
:right @page :right Kumatawan sa lahat ng kanan na pahina ng dokumento na ipinapahayag (sa pakikipagugnayan sa @page rule).
:root :root Piliin ang pangunahing element ng dokumento.
:scope :scope Piliin ang element na ginamit bilang reference point o range ng selector.
:state() :state() Piliin ang custom element na may tinukoy na custom state.
:target :target Piliin ang kasalukuyang aktibong target element.
:user-invalid :user-invalid Piliin ang form element na may hindi gumagamit na halaga (pagkatapos ng interaksyon ng user sa kanila).
:user-valid :user-valid Piliin ang form element na may gumagamit na halaga (pagkatapos ng interaksyon ng user sa kanila).
:valid input:valid Piliin ang lahat ng input element na may gumagamit na halaga.
:visited a:visited 选择所有已访问的链接。
:where() :where(ol, ul) 选择所有 <ul> 和 <ol> 元素。