Creați cantități specifice CSS specifice și layout-uri

Sep 13, 2025

să

În acest tutorial vom arunca o privire la modalitățile de schimbare a stilurilor CSS ale elementelor, precum și de styling aparent părinții, în funcție de numărul de elemente. De asemenea, vom vedea cum să schimbăm aspectul elementelor bazate pe cantitatea lor, pentru a crea o adaptare mai adaptabilă Layout-ul site-ului care utilizează mai bine spațiul.

CSS Tricks pentru a revoluționa layout-urile Web

În cele din urmă, vom acoperi utilizarea contoarelor CSS pentru a afișa indicele unui element într-un set din interior, precum și afișarea numărului total din interiorul părintelui. Toate acestea vor fi obținute numai cu CSS PURE, fără a fi nevoie de JavaScript sau cadre, ceea ce duce la un cod simplu și mai eficient.

Pentru a construi un site fără a fi nevoie de cod nesfârșit, veți avea nevoie de a Builder de site-uri web . Și indiferent de capacitățile site-ului dvs., vă asigurați-vă web hosting Serviciul este potrivit pentru scop. Pentru ceva diferit, obțineți-vă Stocare in cloud până la zero.

Selectori cu un singur element

CSS3 are doar o singură pereche de selectori care pot determina cantitatea de elemente, și anume: numai selectoarele numai de tip: numai de tip. După ce au spus acest lucru, sunt într-adevăr capabili să determine dacă un element este pe cont propriu sau are frați. Selectorul numai pentru copii se potrivește cu elemente care sunt singurul copil al părintelui lor, în timp ce: numai elemente de potrivire a elementelor care sunt singurele de tipul lor.

Din păcate, aceasta este în măsura în care selectorii singuri merg, dar există câțiva alți selectori care pot viza elemente bazate pe ordinea lor într-un set de elemente similare. Acestea sunt: NTH-COPIL,: NTH-OF-TYPE-COPIL și NTH-Ultimele de tip, care sunt de obicei folosite pentru a viza elemente bazate pe ordinea lor într-un set de elemente similare. Selectorii NTH-Ultimul și ultimul tip sunt utilizați pentru a determina ordinea elementelor care se bazează înapoi de la ultimul element la primul. Combinarea acestora cu alți selectori ne permite să construim lanțuri mai complexe care vizează elemente specifice bazate pe cantitatea lor.

Cantități specifice de selecție specifice

selector chains — Selectorul: primul tip: NTH-Ultimul de tip (3) și combinatorul general de frate ~ poate fi combinat pentru a viza primele trei și toți frații săi, deci toate într-un set de trei

Din cei patru selectori menționați mai sus, cea principală pe care o vom folosi în acest tutorial este NTH-Ultimul de tip. Diferența dintre acest selector și selectorul NTH-ult-copil este că acesta din urmă include toate frații elementelor din set, în timp ce fostul include numai elemente ale aceluiași tip HTML și, prin urmare, este mai selectivă. Pentru restul acestui tutorial vom folosi selectorii de tip - însă variantele -Child sunt la fel de valide.

NTH-Ultimul de tip poate fi utilizat împreună cu cele mai populare selectori de prim-tip de tip pentru a crea un lanț care vizează primul element într-un set de cantitate dorită. De exemplu, putem folosi: primul tip: NTH-ultima de tip (3) pentru a viza elemente care sunt atât prima, cât și cele ale celei de-a treia de la sfârșitul tipului lor sau, cu alte cuvinte, primul dintr-o set de trei. Putem extinde acest lucru cu combinatorul general de frate ~ pentru a selecta toți frații care urmează primul dintr-un set de trei. Combinând aceste două lanțuri de selector, putem crea un selector complex care vizează elemente care sunt primele trei și toate elementele de același tip care îl urmează, selectând astfel toate elementele într-un set de trei.

 .box: Primul-de-de tip: nth-ultimul de tip (3),
.box: de tipul de tip: nth-ultima de tip (3) ~ .box

Acest lanț de selector nu funcționează numai pentru un anumit număr de elemente, dar poate fi chiar modificat pentru a vizita o serie de cantități.

selector chain — Selectoarele NTH-Ultimele de tip (N + 2) și: NTH-Ultimul de tip (-N + 2) pot fi utilizate pentru a viza elemente din seturi de mai mult de mai puțin de două respectiv două

Dacă vrem să vizăm elemente într-un set cu o cantitate mai mare sau mai mică decât o valoare particulară m, putem folosi lanțul cu tehnicile (N + M) și (-N + M), respectiv. De exemplu, să vizați toate elementele dintr-un set de două sau mai multe elemente pe care le putem folosi:

 .box: Primul-de-de tip: NTH-ultima de tip (N + 2),
.box: Primul-de-of-of-de tip (N + 2) ~ .box

În mod similar, putem viza toate elementele într-un set de două sau mai puține elemente folosind:

.box: Primul tip: NTH-Ultimul de tip (-N + 2),
.box: Primul tip: NTH-Ultimul de tip (-N + 2) ~ .box

După cum puteți vedea, acesta este un lanț puternic de selector care ne permite să realizăm lucruri foarte interesante și utile fără a fi nevoie de JavaScript sau alte cadre. Este util în special atunci când vine vorba de a crea layout-uri adaptive care se schimbă pe baza numărului de elemente.

Layout-uri dinamice, specifice

grid layouts with odd and even numbers — Pentru un număr par a elementelor layouts Grid arată grozav, dar nu atât de mult pentru numerele impare

Să presupunem că vrem să afișăm un grup de cutii care arată rezultatele unei căutări sau a unui apel API într-o structură cu două coloane, rețea. Problema constă în faptul că rezultatele provin dintr-o sursă externă și nu avem nicio modalitate de a cunoaște numărul de rezultate care vor fi returnate, de aceea nu știm câte casete vor fi create. În timp ce grila arata grozav pentru un numar chiar de cutii, atunci cand este aplicat la un numar impar, ultima caseta se afla doar la un rand si arata ... Ei bine, cam ciudat.

Acest lucru este deosebit de problematic atunci când se utilizează elemente Flexbox cu Flex-cresc aplicate acestora, deoarece determină ultimul element să crească în spațiul gol pe rând, preluând astfel lățimea completă. O modalitate de a preveni acest lucru ar putea fi să facă primul dintr-un număr ciudat de cutii să ia un rând complet prin aplicarea unei lățimi de 100% la primele cutii care sunt, de asemenea, un număr impar de casete de la capăt, folosind: primul copil: nth-ultimul de tip (impar). Acest lucru oferă un aspect mai bun, deoarece dă primul și, prin urmare, rezultatul cel mai relevant sau recent mai mare decât ultimul.

Putem chiar să adăugăm un caz special atunci când cantitatea este divizibilă de trei folosind: primul copil: NTH-ultima de tip (3N) pentru a transforma grila într-un aspect cu trei coloane prin aplicarea unei lățimi de 33% pentru prima dată Cutii într-un set cu o cantitate divizibilă de trei și toate cutiile care o urmează.

 .box {
  Lățime: 50%;
}

.box: Primul copil: nth-ultimul de tip (impar) {
  Lățime: 100%;
}

.box: Primul copil: NTH-ultima de tip (3N),
.box: Primul copil: NTH-Ultimul de tip (3N) ~ .box {
  Lățime: 33%;
}

Concluzie

different layouts — Layout-urile pot fi modificate pe baza numărului de elemente doar prin utilizarea lanțurilor de selector CSS

După cum am văzut, selectorii CSS pot fi legați împreună într-o varietate de moduri interesante pentru a aplica stiluri și aspecte adaptive care se schimbă pe baza cantității de elemente. Lanțurile de selecție pot fi, de asemenea, utilizate pentru a aplica în mod aparent stiluri părintelui unui set de elemente de o anumită cantitate, folosind: înainte sau: după pseudo-elemente care sunt poziționate pentru a prelua dimensiunea completă a părintelui. În combinație cu contoarele CSS, aceste elemente pseudo-elemente pot fi utilizate pentru a afișa numărul total de descendenți într-un element părinte, precum și textul care se schimbă în funcție de cantitatea de descendenți.

Aceste tehnici oferă o modalitate valoroasă de a crea stiluri dinamice, pe bază de cantități, care sunt utile atunci când manipulează un număr necunoscut de elemente, care este adesea cazul în cazul în care se ocupă de API.

Acest articol a fost publicat inițial în numărul 308 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpărați problema 308 aici sau Abonați-vă aici .

Articole similare:

5 sfaturi pentru Super-Fast RSS
Creați un aspect receptiv cu grila CSS
Înțelegerea proprietății afișajului CSS

Creați cantități specifice CSS specifice și layout-uri

Selectori cu un singur element

Cantități specifice de selecție specifice

Layout-uri dinamice, specifice

Concluzie

să - Cele mai populare articole

Tutoriale Krita: Aflați elementele de bază ale software-ului de artă digitală

Construiți un portal client cu WordPress

Cum se codifică efectele text inteligente cu CSS

Cum să sculptați un nas uman în zbrush: 4 pași simpli

Cum să scanați o persoană în mai puțin de cinci minute

Vopsea un portret de stil în Photoshop CC

10 Reguli de aur pentru SVG-urile responsabile

7 moduri ucigașe de a influența comportamentul utilizatorilor

Categorii