Elementen automatisch nummeren met CSS-tellers

CSS-tellers worden gebruikt om tellingen aan elementen toe te voegen. Het aantal wordt opgeteld door variabelen op te geven die kunnen worden geïnitialiseerd (met counter-reset), en deze variabelen kunnen vervolgens worden opgehoogd door CSS-regels.

Veel ontwikkelaars zien deze krachtige CSS-functie over het hoofd, en daarom gaan we in deze tutorial bespreken hoe met tellers te werken.

Wanneer CSS-tellers gebruiken

CSS-tellers kunnen worden gebruikt wanneer u een telsysteem op uw webpagina nodig heeft. Enkele van de beste gebruiksscenario's zijn:

  • Nummering van complexe lijsten
  • Maak dynamische paginatielinks
  • Nummeringsstappen in een onboardingsysteem.

In deze tutorial zullen we het hebben over het gebruik van CSS-tellers om complexe lijsten te maken en dynamische paginering te maken .

CSS-tellers gebruiken

De CSS telsysteem bestaat uit de counter-reset, counter-increment, counter()en counters()en contenteigenschappen. Deze eigenschappen zorgen voor alles wat u moet doen in het CSS-telsysteem.

Laten we deze eigenschappen nader bekijken, zodat we begrijpen hoe ze kunnen worden gebruikt.

Counter-eigenschappen uitgelegd

  • counter-reset: Wordt gebruikt om uw teller te resetten of te initialiseren . Om CSS-tellers te gebruiken, moet u er eerst een maken met deze eigenschap.
  • counter-increment: Wordt gebruikt om de variabele van een reeds geïnitialiseerde teller te verhogen .
  • counter(): Deze functie doet de magie. Het wordt gebruikt in de content-eigenschap, op een :beforeof :afterpseudo-selector, om de tellingen bij elkaar op te tellen.
  • counters(): Gebruikt voor erfelijke tellen, en genereert het geval van een ouder teller variabele in het kind.
  • content: Wordt gebruikt om optellen de telling waarde (strings) door het manipuleren van inhoud voor :beforeen :aftercss selectors.

Nu we deze eigenschappen en waarden van CSS-tellers begrijpen, gaan we eens kijken naar onze voorbeelden.

Nummeringselementen op een webpagina

Nummering kan in HTML worden gedaan, maar CSS-nummering biedt dynamische en gemakkelijk te controleren manieren om het werk uit te voeren met behulp van CSS-tellers. In het volgende voorbeeld worden de elementen op de webpagina genummerd met CSS.

Ten eerste gaan we een aantal eenvoudige nummering instellen die slechts op één niveau kan worden genummerd. Daarna gaan we verder met een geavanceerder voorbeeld waarin we een inhoudsopgave opstellen.

Eenvoudige nummering

In dit voorbeeld maken we een eenvoudige itemteller met CSS. Maak in uw HTML uw itemstructuur als volgt:

Mercury

Venus

Earth

In de CSS gaan we drie belangrijke dingen doen:

  1. Initialiseer de teller op de bovenliggende div met counter-reset
  2. Verhoog de tellerwaarde met 1 voor het kind div pmetcounter-increment
  3. Voeg de tellervariabelen toe vóór de div pinhoud met behulp van de :beforepseudo-selector.

Laten we gaan!

div { list-style-type: none; counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */ } div p { counter-increment: css-counter 1; /* Increase the counter by 1. */ } div p:before { content: counter(css-counter) ". "; /* Apply counter before children's content. */ } 

Het resultaat

De bovenstaande nummering is gedaan met pure CSS. Interessant, toch?

Nu gaan we wat complexere nummering implementeren, waardoor CSS-tellers het leren waard zijn. We zullen geneste elementen nummeren met de counters()functie, die kan worden gebruikt voor overgeërfde telling. Dit genereert de instantie van een ouderteller in het kind.

Inhoudsopgave Nummering


    
  • Web Development
    • HTML
    • CSS
      • CSS Introduction
      • CSS Selectors
      • CSS Animation
    • JavaScript
  • Graphics Design
  • Computer Education

De CSS ziet er als volgt uit:

ul { list-style-type: none; counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */ } ul li:before { counter-increment: css-counters; content: counters(css-counters, ".") " "; /* generates inherited counters from parents */ } 

Het resultaat

Nu kun je zien met de kracht van nesten counters(). Dit bespaart u het gedoe van onjuist nesten. Om u te helpen fouten te voorkomen, erft het de tegeneigenschappen van de ouders en voegt het de tegenhanger van het kind eraan toe.

Dus nu we goed zijn met nummeringselementen, wat nu?

Dynamische paginering maken

Paginering maken met CSS-tellers is vrij eenvoudig. Paginering wordt meestal gedaan met HTML, waarbij dezelfde set elementen wordt herhaald en de nummers erin worden gewijzigd om navigatie naar elke pagina van een resultaat te creëren.

Een ontwikkelaar kan ervoor kiezen om iets dynamisch te gebruiken, zoals het maken van loops die de elementen genereren, of doe het vanaf de server. Maar vandaag gaan we CSS gebruiken om dit dynamisch te doen!

Hoe? Met onze senior counters()functie.

Op dezelfde manier waarop we onze waarden voor de nummering hierboven hebben verhoogd, kunnen we ook een dynamische paginatielijst maken met (je raadt het al) CSS-tellers.

Laten we beginnen:


    
  • <
  • >

Opmerking: u hoeft geen getallen toe te voegen binnen de li, en u kunt er zoveel maken als u wilt. Onze CSS counters()gaat de nummering voor ons doen.

De CSS ziet er als volgt uit:

ul { list-style-type: none; counter-reset: paginate-counter 0; } ul li { border: solid 3px #ccc; color: #36f; border: 5px; float: left; margin: 5px; padding: 8px 10px; font-size: 14px; cursor: pointer; text-align: center; } /* Setting styles for the inner text */ ul li:not(.previous):not(.next):before { counter-increment: paginate-counter; content: counter(paginate-counter); } 

Het resultaat

Wat kun je nog meer doen met tellers? Laat me je ideeën horen.

Bedankt!