CSS-i positsioonilised pseudoklassid: dünaamilise kujunduse jaoks täpsem elementide valik

CSS-i positsioonilised pseudoklassid pakuvad võimsa viisi elementide sihtimiseks ja stiilimiseks nende positsiooni põhjal dokumendipuus. Need selektorid võimaldavad rakendada konkreetseid stiile elemendi esimesele, viimasele või nth lapsele, avades võimalused dünaamiliste ja visuaalselt atraktiivsete veebiliideste loomiseks. See juhend süveneb positsiooniliste pseudoklasside maailma, pakkudes praktilisi näiteid ja kasutusjuhtumeid teie CSS-oskuste täiendamiseks.

CSS-i pseudoklasside mõistmine

Enne positsiooniliste pseudoklasside juurde asumist vaatame lühidalt üle, mis on CSS-is pseudoklassid. Pseudoklassid on selektoritele lisatud märksõnad, mis määravad valitud elementide spetsiaalse oleku. Need võimaldavad stiilida elemente muude tegurite põhjal kui nende nimi, atribuudid või sisu; pigem stiilivad need vastavalt nende positsioonile, olekule või muudele dünaamilistele kriteeriumidele. Näiteks rakendab :hover pseudoklass stiile, kui kasutaja viib hiire elemendi kohale.

Sissejuhatus positsioonilistesse pseudoklassidesse

Positsioonilised pseudoklassid on pseudoklasside alamhulk, mis sihib elemente nende positsiooni põhjal oma vanemelemendis. Need on uskumatult kasulikud loendite, tabelite või mis tahes sisustruktuuri stiilimiseks, kus soovite rakendada erinevaid stiile elemendi asukoha põhjal.

Peamised positsioonilised pseudoklassid

1. :first-child

Pseudoklass :first-child valib esimese laps-elemendi oma vanema sees. See on kasulik konkreetsete stiilide rakendamisel loendi esimesele üksusele, tabeli esimesele reale või mis tahes muul juhul, kui soovite esialgset elementi esile tõsta.

Näide: navigeerimismenüü esimese loendiüksuse stiilimine.

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

See CSS-kood muudab <nav> elemendi <ul> esimese loendiüksuse paksuks ja siniseks.

Praktiline rakendus: Kujutage ette e-kaubanduse veebisaiti. Võiksite kasutada :first-child, et visuaalselt esile tõsta esimene toode esiletõstetud toodete sektsioonis.

2. :last-child

Pseudoklass :last-child valib vastupidi viimase laps-elemendi oma vanema sees. See on ideaalne piiri või marginaali lisamiseks kõigile üksustele, välja arvatud viimane, või konkreetse stiili rakendamiseks sarja viimasele elemendile.

Näide: alumise piiri eemaldamine loendi viimaselt üksuselt.

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

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

See CSS-kood lisab alumise piiri kõigile loendiüksustele, välja arvatud viimane, luues puhta visuaalse eraldamise ilma lisapiirita allosas.

Praktiline rakendus: Kontaktvormis võiksite kasutada :last-child, et eemaldada alumine marginaal viimaselt sisestusväljalt enne esitamise nuppu.

3. :nth-child(n)

Pseudoklass :nth-child(n) on mitmekülgsem selektor, mis võimaldab sihtida elemente nende numbrilise positsiooni põhjal oma vanema sees. n tähistab arvu, märksõna (even või odd) või valemit.

Näide: iga teise rea stiilimine tabelis.

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

See CSS-kood rakendab tabeli igale paarisarvulisele reale helehalli tausta, parandades loetavust.

Näide: kolmanda lapse valimine.

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

See CSS-kood muudab <div> elemendi sees kolmanda lõigu roheliseks.

Näide: valemi kasutamine iga kolmanda lapse valimiseks.

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

See CSS-kood rakendab kursiivstiili iga kolmanda loendiüksuse jaoks.

Praktiline rakendus: Uudiste veebisaidil võiksite kasutada :nth-child(n), et stiilida iga kolmandat artiklit erinevalt, luues visuaalset mitmekesisust ja tõstes esile konkreetset sisu.

4. :nth-of-type(n)

Pseudoklass :nth-of-type(n) sarnaneb :nth-child(n)-ga, kuid see sihib elemente nende tüübi põhjal oma vanema sees. See tähendab, et see võtab loendamisel arvesse ainult sama tüüpi elemente.

Näide: teise lõigu stiilimine divi sees.

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

See CSS-kood suurendab teise lõikelemendi fondi suurust <div> sees. See ignoreerib loendamisel kõiki muid elemenditüüpe divi sees.

Praktiline rakendus: Blogipostituses võiksite kasutada :nth-of-type(n), et stiilida iga teist pilti erinevalt, sõltumata muude elementide, nagu lõigud või päised, olemasolust.

5. :first-of-type

Pseudoklass :first-of-type valib esimese oma tüüpi elemendi oma vanema sees. See on kasulik esimese lõigu, pildi või muu konkreetse elemenditüübi stiilimiseks konteineris.

Näide: esimese pildi stiilimine artiklis.

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

See CSS-kood muudab <article> elemendi esimese pildi vasakule ja lisab paremale marginaali.

Praktiline rakendus: Toote kirjelduslehel võiksite kasutada :first-of-type, et kuvada põhitoote pilt silmapaistvalt.

6. :last-of-type

Pseudoklass :last-of-type valib viimase oma tüüpi elemendi oma vanema sees. See on :first-of-type vastasosa ja seda kasutatakse konkreetse tüübi viimase elemendi stiilimiseks konteineris.

Näide: viimase lõigu stiilimine sektsioonis.

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

See CSS-kood eemaldab alumise marginaali viimasest lõikelemendist <section> sees.

Praktiline rakendus: Blogipostituses võiksite kasutada :last-of-type, et eemaldada alumine marginaal lõpp-lõigust, luues puhtama visuaalse lõpu.

Reaalmaailma kasutusjuhtumid ja näited

Uurime mõningaid keerukamaid ja praktilisemaid näiteid, mis näitavad, kuidas positsioonilisi pseudoklasse saab kasutada reaalses maailmas.

1. Navigeerimismenüü stiilimine

Navigeerimismenüüd on veebisaitidel levinud element ja positsioonilisi pseudoklasse saab kasutada nende välimuse täiustamiseks.


<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</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;
}

See kood stiilib navigeerimismenüü horisontaalseks, eemaldab punktid ja muudab esimese üksuse paksuks. Samuti eemaldab see viimaselt üksuselt parema marginaali, tagades õige vahe.

2. Tootenimistu stiilimine

E-kaubanduse veebisaidid kuvavad sageli tooteid ruudustiku- või loendivormingus. Positsioonilisi pseudoklasse saab kasutada visuaalselt atraktiivsete tootenimistute loomiseks.


<div class="product-list">
  <div class="product"><img src="product1.jpg" alt="Product 1"><p>Product 1 Description</p></div>
  <div class="product"><img src="product2.jpg" alt="Product 2"><p>Product 2 Description</p></div>
  <div class="product"><img src="product3.jpg" alt="Product 3"><p>Product 3 Description</p></div>
  <div class="product"><img src="product4.jpg" alt="Product 4"><p>Product 4 Description</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;
}

See kood kuvab tooted kaheruudulises ruudustikus ja lisab igale tootele piiri. Samuti rakendab see igale paaritu arvu tootele helehalli tausta, parandades visuaalset eristamist.

3. Tabeli stiilimine

Tabeleid kasutatakse tavaliselt tabeliandmete kuvamiseks. Positsioonilised pseudoklassid võivad parandada tabeli loetavust ja välimust.


<table>
  <thead>
    <tr>
      <th>Nimi</th>
      <th>Vanus</th>
      <th>Riik</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>Kanada</td>
    </tr>
    <tr>
      <td>David Lee</td>
      <td>40</td>
      <td>UK</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;
}

See kood stiilib tabeli piiride, polsterdamise ja vahelduvate reavärvidega, et parandada loetavust.

Positsiooniliste pseudoklasside kombineerimine teiste selektoritega

Positsioonilisi pseudoklasse saab kombineerida teiste CSS-i selektoritega, et luua veelgi konkreetsemaid ja võimsamaid stiilireegleid. Näiteks saate kombineerida positsioonilise pseudoklassi klassi selektoriga või atribuudi selektoriga.

Näide: konkreetse klassiga esimese üksuse stiilimine.

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

See CSS-kood rakendab punase värvi ainult esimesele loendiüksusele, millel on ka klass "highlight".

Brauseri ühilduvus

Positsioonilisi pseudoklasse toetavad laialdaselt kaasaegsed veebibrauserid, sealhulgas Chrome, Firefox, Safari, Edge ja Opera. Siiski on alati hea praktika testida oma CSS-koodi erinevates brauserites, et tagada järjepidev renderdamine.

Parimad tavad ja kaalutlused

Kasutage semantilist HTML-i: Veenduge, et teie HTML-struktuur on loogiline ja semantiline, kuna see hõlbustab elementide sihtimist positsiooniliste pseudoklassidega.
Vältige ülespetsiifilisust: Kuigi selektorite kombineerimine võib olla võimas, vältige liiga spetsiifiliste reeglite loomist, mida on raske hooldada.
Testige erinevates brauserites: Testige alati oma CSS-koodi erinevates brauserites, et tagada ühilduvus ja järjepidev renderdamine.
Arvestage jõudlusega: Kuigi positsioonilised pseudoklassid on üldiselt tõhusad, vältige keerukate selektorite kasutamist suurte andmekogumite puhul, kuna see võib jõudlust mõjutada.
Kasutage kommentaare: Lisage oma CSS-koodile kommentaare, et selgitada oma selektorite eesmärki ja hõlbustada teiste (või iseenda tulevikus) mõistmist.

Järeldus

CSS-i positsioonilised pseudoklassid on veebiarendajate jaoks väärtuslik tööriist, mis võimaldab täpsemat elementide valikut ja dünaamilist stiili. Neid selektoreid valdades saate luua visuaalselt atraktiivseid ja kasutajasõbralikke veebiliideseid, mis kohanduvad erinevate sisustruktuuridega. Katsetage selles juhendis toodud näidetega ja uurige positsiooniliste pseudoklasside lõputuid võimalusi oma veebiprojektides.

See põhjalik juhend annab kindla aluse CSS-i positsiooniliste pseudoklasside mõistmiseks ja kasutamiseks. Kui jätkate õppimist ja katsetamist, avastate veelgi loomingulisemaid viise oma veebiarendusoskuste täiendamiseks ja erakordsete kasutajakogemuste loomiseks.

Lisateave

CSS-i positsiooniliste pseudoklasside mõistmise süvendamiseks kaaluge järgmiste ressursside uurimist:

Head stiilimist!