CSS Pseudo-class

Rekomendasyon ng kurso:

Ano ang pangkat ng pseudo-class?

Ginagamit ang pangkat ng pseudo-class upang tanggapin ang espesyal na estado ng elemento.

  • Halimbawa, maaari itong gamitin para sa:
  • I-set ang estilo kapag ang mouse ay naghinto sa elemento
  • I-set ang estilo ng na binisita at hindi binisita na links
I-set ang estilo ng elemento kapag ito ay nakatanggap ng fokus

Ilagay ang mouse sa ibabaw ko

Sintaks

selectorpropertyAng sintaks ng pseudo-class: pseudo-class
  {property :value
}

;

Anchor na pangkat ng pseudo-class

Halimbawa

/* Links ay maaaring magpakita sa iba't ibang paraan: */
/* Link na hindi binisita */
  a:link {
}
color: #FF0000;
/* Link na binisita */
  a:visited {
}
color: #00FF00;
/* Link na naghinto */
  a:hover {
}
color: #FF00FF;
/* Na pinili na link */
  a:active {
}

Subukan nang sarili

color: #0000FF;a:hover Dapat ay magiging epektibo pagkatapos, sa pagitan ng CSS na paglilinaw! a:link Babala: a:visited Ata:active Dapat ay magiging epektibo pagkatapos, sa pagitan ng CSS na paglilinaw! a:hover Dapat ay magiging epektibo pagkatapos! Ang pangalan ng pseudo-class ay hindi nagiging masasayang kapag may may malalaking o maliit na titik.

Pangkat ng pseudo-class at klase ng CSS

Maaaring gamitin ang pangkat ng pseudo-class kasama ang klase ng CSS:

Kapag ikaw ay naghinto sa link sa halimbawa, ito ay magbabago ng kulay:

Halimbawa

a.highlight:hover {
  color: #ff0000;
}

Subukan nang sarili

Maghinto sa <div>

Sa paggamit ng <div> elemento :hover Pangkat ng pseudo-class:

Halimbawa

div:hover {
  background-color: blue;
}

Subukan nang sarili

Simple na tooltip hover

Ilagay ang mouse hover sa <div> elemento para makita ang <p> elemento (katulad ng effect ng tooltip):

Hover sa akin para makita ang <p> elemento.

Hehe, ako dito!

Halimbawa

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Subukan nang sarili

CSS - :first-child 伪类

:first-child Ang mga pseudo-class ay tumutugma sa tinukoy na elemento: ang elemento ay unang anak ng ibang elemento.

Tumugma sa kauna-unahang <p> elemento

Sa mga sumusunod na halimbawa, ang selector ay tumutugma sa anumang <p> na naging unang anak ng anumang elemento:

Halimbawa

p:first-child {
  color: blue;
}

Subukan nang sarili

Tumugma sa kauna-unahang <i> na elemento sa lahat ng <p> elemento

Sa mga sumusunod na halimbawa, ang selector ay tumutugma sa kauna-unahang <i> na elemento sa lahat ng <p> elemento:

Halimbawa

p i:first-child {
  color: blue;
}

Subukan nang sarili

Tumugma sa lahat ng <i> na elemento sa unang <p> elemento

Sa mga sumusunod na halimbawa, ang selector ay tumutugma sa lahat ng <i> na elemento sa <p> na naging unang anak ng ibang elemento:

Halimbawa

p:first-child i {
  color: blue;
}

Subukan nang sarili

CSS - :lang 伪类

:lang Ang mga pseudo-class ay nagbibigay-daan sa iyo na magtukoy ng mga partikular na alituntunin para sa iba't ibang wika.

Sa mga sumusunod na halimbawa,:lang Tukuyin ang mga salita sa quote para sa attribute na lang="en" na <q> elemento:

Halimbawa

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Subukan nang sarili

Higit pang mga halimbawa

Idagdag ang iba't ibang estilo sa hyperlink
Ito ay nagpapakita kung paano idagdag ang iba pang estilo sa hyperlink.
Gamitin ang :focus
Ito ay nagpapakita kung paano gamitin ang :focus 伪类.

Lahat ng CSS 伪类

Selector Example Example description
:active a:active Piliin ang aktibong link.
:checked input:checked Piliin ang bawat <input> na napili.
:disabled input:disabled Piliin ang bawat <input> na binawalang gamit.
:empty p:empty Piliin ang bawat <p> na walang anak na elemento.
:enabled input:enabled Piliin ang bawat <input> elemento na naging enabled.
:first-child p:first-child Piliin ang bawat <p> elemento na naging unang anak ng kanyang magulang.
:first-of-type p:first-of-type Piliin ang bawat <p> elemento na naging unang elemento ng kanyang magulang.
:focus input:focus Piliin ang <input> elemento na naging focus.
:hover a:hover Piliin ang link na nasa ibabaw ng mouse.
:in-range input:in-range Piliin ang <input> elemento na may halaga na nasa saklaw na tinukoy.
:invalid input:invalid Piliin ang lahat ng <input> elemento na mayroong walang katotohanan na halaga.
:lang(language) p:lang(it) Piliin ang bawat <p> elemento na naging halaga ng attribute na lang na nagsisimula ng 'it'.
:last-child p:last-child Piliin ang bawat <p> elemento na naging huling anak ng kanyang magulang.
:last-of-type p:last-of-type Piliin ang bawat <p> elemento na naging huling elemento ng kanyang magulang.
:link a:link Piliin ang lahat ng unvisited links.
:not(selector) :not(p) Piliin ang bawat elemento na hindi <p>.
:nth-child(n) p:nth-child(2) Piliin ang bawat <p> elemento na naging ikalawang anak ng kanyang magulang.
:nth-last-child(n) p:nth-last-child(2) Piliin ang bawat <p> elemento na naging ikalawang anak ng kanyang magulang, mula sa huling anak.
:nth-last-of-type(n) p:nth-last-of-type(2) Piliin ang bawat <p> elemento na naging ikalawang elemento ng kanyang magulang <p>, mula sa huling anak.
:nth-of-type(n) p:nth-of-type(2) Piliin ang bawat <p> elemento na naging ikalawang elemento ng kanyang magulang.
:only-of-type p:only-of-type Piliin ang bawat <p> elemento na naging tanging elemento ng kanyang magulang <p>.
:only-child p:only-child Piliin ang <p> elemento bilang tanging anak ng kanyang magulang.
:optional input:optional Select <input> elements without the "required" attribute.
:out-of-range input:out-of-range Select <input> elements with values outside the specified range.
:read-only input:read-only Select <input> elements specified with the "readonly" attribute.
:read-write input:read-write Select <input> elements without the "readonly" attribute.
:required input:required Select <input> elements specified with the "required" attribute.
:root root Select the root element of the 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.

All CSS pseudo-elements

Selector Example Example description
::after p::after Insert content after each <p> element.
::before p::before Insert content before each <p> element.
::first-letter p::first-letter Select the first letter of each <p> element.
::first-line p::first-line Select the first line of each <p> element.
::selection p::selection Select the part of the element chosen by the user.