CSS pozicijos pseudoklasės: pažangus elementų pasirinkimas dinaminiam stiliui

CSS pozicijos pseudoklasės siūlo galingą būdą pasirinkti ir stilizuoti elementus pagal jų poziciją dokumento medyje. Šie selektoriai leidžia pritaikyti specifinius stilius pirmajam, paskutiniam ar n-tajam elemento vaikui, atveriant galimybes kurti dinamines ir vizualiai patrauklias žiniatinklio sąsajas. Šis vadovas gilinsis į pozicijos pseudoklasių pasaulį, pateikdamas praktinius pavyzdžius ir naudojimo atvejus, kad pagerintumėte savo CSS įgūdžius.

CSS pseudoklasių supratimas

Prieš gilindamiesi į pozicijos pseudoklases, trumpai apžvelkime, kas yra pseudoklasės CSS. Pseudoklasės yra raktažodžiai, pridedami prie selektorių, kurie nurodo specialią pasirinkto elemento (-ų) būseną. Jos leidžia stilizuoti elementus remiantis kitais veiksniais, o ne jų pavadinimu, atributais ar turiniu; veikiau jie stilizuojami pagal jų poziciją, būseną ar kitus dinaminius kriterijus. Pavyzdžiui, pseudoklasė :hover pritaiko stilius, kai vartotojas užveda pelės žymeklį virš elemento.

Pozicijos pseudoklasių įvadas

Pozicijos pseudoklasės yra pseudoklasių pogrupis, kuris yra skirtas elementams pagal jų poziciją jų tėviniame elemente. Jie yra neįtikėtinai naudingi stilizuojant sąrašus, lenteles ar bet kokią turinio struktūrą, kur norite pritaikyti skirtingus stilius, atsižvelgiant į elemento vietą.

Pagrindinės pozicijos pseudoklasės

1. :first-child

Pseudoklasė :first-child pasirenka pirmąjį vaiko elementą savo tėviniame elemente. Tai naudinga norint pritaikyti specifinius stilius pirmajam sąrašo elementui, pirmajai lentelės eilei arba bet kokiam kitam scenarijui, kai norite išryškinti pradinį elementą.

Pavyzdys: Pirmojo sąrašo elemento navigacijos meniu stilizavimas.

nav ul li:first-child {
  font-weight: bold;
  color: #007bff;
}

Šis CSS kodas padarys pirmąjį sąrašo elementą <nav> elemento <ul> paryškintu ir mėlynu.

Praktinis pritaikymas: Įsivaizduokite el. prekybos svetainę. Galite naudoti :first-child norėdami vizualiai išryškinti pirmąjį produktą išskirtinių produktų skyriuje.

2. :last-child

Pseudoklasė :last-child, atvirkščiai, pasirenka paskutinį vaiko elementą savo tėviniame elemente. Tai puikiai tinka pridedant kraštinę arba paraštę visiems elementams, išskyrus paskutinį, arba taikant konkretų stilių paskutiniam elementui serijoje.

Pavyzdys: Paskutinio sąrašo elemento apatinės kraštinės pašalinimas.

ul li {
  border-bottom: 1px solid #ccc;
}

ul li:last-child {
  border-bottom: none;
}

Šis CSS kodas pridės apatinę kraštinę visiems sąrašo elementams, išskyrus paskutinį, sukuriant švarų vizualinį atskyrimą be papildomos kraštinės apačioje.

Praktinis pritaikymas: Kontaktų formoje galite naudoti :last-child norėdami pašalinti apatinę paraštę iš paskutinio įvesties lauko prieš pateikimo mygtuką.

3. :nth-child(n)

Pseudoklasė :nth-child(n) yra universalesnis selektorius, leidžiantis pasirinkti elementus pagal jų skaitinę poziciją jų tėviniame elemente. n atstovauja skaičiui, raktažodžiui (even arba odd) arba formulei.

Pavyzdys: Kiekvienos antros lentelės eilės stilizavimas.

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

Šis CSS kodas pritaikys šviesiai pilką foną kiekvienai lyginei eilei lentelėje, pagerindamas skaitomumą.

Pavyzdys: Trečiojo vaiko pasirinkimas.

div p:nth-child(3) {
  color: green;
}

Šis CSS kodas padarys trečiąjį pastraipos elementą <div> elemente žalią.

Pavyzdys: Formulės naudojimas kiekvienam trečiajam vaikui pasirinkti.

ul li:nth-child(3n) {
  font-style: italic;
}

Šis CSS kodas pritaikys pasvirąjį stilių kiekvienam trečiajam sąrašo elementui.

Praktinis pritaikymas: Naujienų svetainėje galite naudoti :nth-child(n) norėdami stilizuoti kas trečią straipsnį skirtingai, sukurdami vizualią įvairovę ir išryškindami konkretų turinį.

4. :nth-of-type(n)

Pseudoklasė :nth-of-type(n) yra panaši į :nth-child(n), bet ji yra skirta elementams pagal jų tipą jų tėviniame elemente. Tai reiškia, kad skaičiuojant atsižvelgiama tik į to paties tipo elementus.

Pavyzdys: Antros pastraipos div viduje stilizavimas.

div p:nth-of-type(2) {
  font-size: 1.2em;
}

Šis CSS kodas padidins antrojo pastraipos elemento šrifto dydį <div> viduje. Jis ignoruos bet kokius kitus elemento tipus div skaičiuojant.

Praktinis pritaikymas: Blog'o įraše galite naudoti :nth-of-type(n) norėdami stilizuoti kas antrą paveikslėlį skirtingai, nepriklausomai nuo kitų elementų, tokių kaip pastraipos ar antraštės, buvimo.

5. :first-of-type

Pseudoklasė :first-of-type pasirenka pirmąjį savo tipo elementą savo tėviniame elemente. Tai naudinga stilizuojant pirmąją pastraipą, paveikslėlį ar bet kurį kitą konkretų elemento tipą konteineryje.

Pavyzdys: Pirmojo paveikslėlio straipsnyje stilizavimas.

article img:first-of-type {
  float: left;
  margin-right: 10px;
}

Šis CSS kodas perkels pirmąjį paveikslėlį <article> elemente į kairę ir pridės paraštę į jo dešinę.

Praktinis pritaikymas: Produkto aprašymo puslapyje galite naudoti :first-of-type norėdami ryškiai rodyti pagrindinį produkto paveikslėlį.

6. :last-of-type

Pseudoklasė :last-of-type pasirenka paskutinį savo tipo elementą savo tėviniame elemente. Tai yra :first-of-type atitikmuo ir naudojamas norint stilizuoti paskutinį konkretaus tipo elementą konteineryje.

Pavyzdys: Paskutinės pastraipos skyriuje stilizavimas.

section p:last-of-type {
  margin-bottom: 0;
}

Šis CSS kodas pašalina apatinę paraštę iš paskutinio pastraipos elemento <section> viduje.

Praktinis pritaikymas: Blog'o įraše galite naudoti :last-of-type norėdami pašalinti apatinę paraštę iš paskutinės pastraipos, sukurdami švaresnę vizualinę pabaigą.

Realaus pasaulio naudojimo atvejai ir pavyzdžiai

Panagrinėkime dar kelis sudėtingesnius ir praktinius pavyzdžius, rodančius, kaip pozicijos pseudoklases galima naudoti realaus pasaulio scenarijuose.

1. Navigacijos meniu stilizavimas

Navigacijos meniu yra dažnas elementas svetainėse, o pozicijos pseudoklasės gali būti naudojamos norint pagerinti jų išvaizdą.


<nav>
  <ul>
    <li><a href="#home">Pagrindinis</a></li>
    <li><a href="#about">Apie</a></li>
    <li><a href="#services">Paslaugos</a></li>
    <li><a href="#contact">Kontaktai</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:first-child {
  font-weight: bold;
}

nav ul li:last-child {
  margin-right: 0;
}

Šis kodas stilizuoja navigacijos meniu taip, kad jis būtų horizontalus, pašalina kulkas ir paryškina pirmąjį elementą. Jis taip pat pašalina dešinę paraštę iš paskutinio elemento, užtikrindamas tinkamą tarpą.

2. Produkto sąrašo stilizavimas

El. prekybos svetainės dažnai rodo produktus tinklelio arba sąrašo formatu. Pozicijos pseudoklasės gali būti naudojamos norint sukurti vizualiai patrauklius produktų sąrašus.


<div class="product-list">
  <div class="product"><img src="product1.jpg" alt="Produktas 1"><p>Produkto 1 Aprašymas</p></div>
  <div class="product"><img src="product2.jpg" alt="Produktas 2"><p>Produkto 2 Aprašymas</p></div>
  <div class="product"><img src="product3.jpg" alt="Produktas 3"><p>Produkto 3 Aprašymas</p></div>
  <div class="product"><img src="product4.jpg" alt="Produktas 4"><p>Produkto 4 Aprašymas</p></div>
</div>


.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
}

.product:nth-child(odd) {
  background-color: #f9f9f9;
}

Šis kodas rodo produktus dviejų stulpelių tinklelyje ir prideda kraštinę prie kiekvieno produkto. Jis taip pat taiko šviesiai pilką foną kiekvienam nelyginiam numeriui, pagerindamas vizualų atskyrimą.

3. Lentelės stilizavimas

Lentelės dažniausiai naudojamos lenteliniams duomenims rodyti. Pozicijos pseudoklasės gali pagerinti lentelės skaitomumą ir išvaizdą.


<table>
  <thead>
    <tr>
      <th>Vardas</th>
      <th>Amžius</th>
      <th>Šalis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Džonas Doe</td>
      <td>30</td>
      <td>JAV</td>
    </tr>
    <tr>
      <td>Džeinė Smit</td>
      <td>25</td>
      <td>Kanada</td>
    </tr>
    <tr>
      <td>Deividas Li</td>
      <td>40</td>
      <td>JK</td>
    </tr>
  </tbody>
</table>


table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

Šis kodas stilizuoja lentelę su kraštinėmis, užpildu ir pakaitinėmis eilučių spalvomis, kad būtų geresnis skaitomumas.

Pozicijos pseudoklasių derinimas su kitais selektoriais

Pozicijos pseudoklases galima derinti su kitais CSS selektoriais, kad būtų sukurtos dar konkretesnės ir galingesnės stilizavimo taisyklės. Pavyzdžiui, galite sujungti pozicijos pseudoklasę su klasės selektoriumi arba atributo selektoriumi.

Pavyzdys: Pirmojo elemento su konkrečia klase stilizavimas.

ul li.highlight:first-child {
  color: red;
}

Šis CSS kodas raudoną spalvą pritaikys tik pirmajam sąrašo elementui, kuris taip pat turi klasę "highlight".

Naršyklės suderinamumas

Pozicijos pseudoklasės yra plačiai palaikomos šiuolaikinių žiniatinklio naršyklių, įskaitant Chrome, Firefox, Safari, Edge ir Opera. Tačiau visada yra gera praktika išbandyti savo CSS kodą skirtingose naršyklėse, kad būtų užtikrintas nuoseklus atvaizdavimas.

Geriausia praktika ir svarstymai

Naudokite semantinį HTML: Įsitikinkite, kad jūsų HTML struktūra yra loginė ir semantinė, nes tai palengvins elementų pasirinkimą su pozicijos pseudoklasėmis.
Venkite per didelio specifiškumo: Nors selektorių derinimas gali būti galingas, venkite kurti per daug specifinių taisyklių, kurias sunku prižiūrėti.
Bandyti skirtingose naršyklėse: Visada išbandykite savo CSS kodą skirtingose naršyklėse, kad užtikrintumėte suderinamumą ir nuoseklų atvaizdavimą.
Apsvarstykite našumą: Nors pozicijos pseudoklasės paprastai yra efektyvios, venkite naudoti sudėtingus selektorius dideliems duomenų rinkiniams, nes tai gali turėti įtakos našumui.
Naudokite komentarus: Pridėkite komentarus prie savo CSS kodo, kad paaiškintumėte savo selektorių paskirtį ir palengvintumėte kitiems (arba sau ateityje) suprasti.

Išvada

CSS pozicijos pseudoklasės yra vertingas įrankis žiniatinklio kūrėjams, leidžiantis pasirinkti pažangius elementus ir dinamiškai stilizuoti. Įvaldę šiuos selektorius, galite sukurti vizualiai patrauklias ir patogias naudoti žiniatinklio sąsajas, kurios prisitaiko prie skirtingų turinio struktūrų. Eksperimentuokite su pavyzdžiais, pateiktais šiame vadove, ir išbandykite begalines pozicijos pseudoklasių galimybes savo žiniatinklio projektuose.

Šis išsamus vadovas suteikia tvirtą pagrindą suprasti ir naudoti CSS pozicijos pseudoklases. Kai ir toliau mokysitės ir eksperimentuosite, atrasite dar daugiau kūrybinių būdų, kaip patobulinti savo žiniatinklio kūrimo įgūdžius ir sukurti išskirtinę vartotojo patirtį.

Tolimesnis mokymasis

Norėdami pagilinti savo supratimą apie CSS pozicijos pseudoklases, apsvarstykite galimybę išnagrinėti šiuos išteklius:

Laimingo stilizavimo!