Hvordan man arbeider med CSS3 Pattern Selectors - dummies

I noen tilfeller må et utvalg du trenger å lage i CSS3, ikke noe å gjøre med enten tagger eller attributter, men mønsteret som objektene vises på siden. For eksempel vil du kanskje velge bare det første objektet, uansett hva det objektet kan være.

I noen tilfeller vil du formatere med alternative medlemmer av en liste eller et annet repetitivt dataelement på en eller annen måte for å gjøre det lettere for brukeren å se hvert element enkeltvis. Følgende liste forteller deg om mønstervalgere som dokumentene ofte bruker.

: første bokstav: Velg det første bokstaven i det angitte objektet. Denne velgeren er nyttig for å lage spesielle teksteffekter, for eksempel drop caps.

Det er ekstremt sjeldent å se at de fleste mønstervelgerne brukes alene fordi du vanligvis ikke vil formatere bare første bokstav for hvert objekt på siden på en bestemt måte. Vanligvis ser du mønstervelger som brukes i kombinasjon med en attributtvelger, for eksempel klassevalgeren, eller med en bestemt tagvelger.

Bruke mønstervelgerne globalt kan ha uventede resultater eller til og med føre til at et program mislykkes (avhengig av hvordan programmets kode og CSS interagerer).
: første linje: Velger første linje av det angitte objektet.
: før: Velger området umiddelbart før det angitte objektinnholdet. Denne velgeren er normalt koblet til innholdsegenskapen for å sette inn noe spesielt før innholdet i det eksisterende objektet.
: etter: Velger området umiddelbart etter det angitte objektinnholdet. Denne velgeren er normalt koblet til innholdsegenskapen for å sette inn noe spesielt før innholdet i det eksisterende objektet.
: første-of-type: Velger det første objektet til en bestemt type.

Selv om spesifikasjonen ikke faktisk forteller deg at du må oppgi en type eller en forelder, vil enkelte mønstervelger ikke fungere uten en. Vanligvis ser du: førstevalgsvælgeren som brukes med en tagvelger, (for eksempel p: førstegangs), men den kan også brukes med en attributtvelger. Alle de andre typene og barnemønstervelgerne fungerer på samme måte.
: siste-of-type: Velger det siste objektet til en bestemt type.
: bare-of-type: Velger det eneste objektet til en bestemt type. Hvis det er mer enn ett objekt av en bestemt type, blir det ikke valgt noe valg.
: nth-of-type ( Nummer ): Velger det angitte objektet til en bestemt type.
: nth-last-of-type ( Nummer ): Velger det angitte objektet til en bestemt type, begynner fra slutten av objektlisten.
: første barn: Velger det første barnet til et spesifisert objekt. Denne velgeren brukes vanligvis til å bruke spesiell formatering til det første elementet i en liste eller tabell.
: Siste barn: Velger det siste barnet til en bestemt forelder.
: bare-barn: Velger det eneste barnet til en bestemt forelder. Når en foreldreobjekt har mer enn ett barn, blir det ikke valgt noe valg.
: nth-barn ( Nummer ): Velger det angitte barnet til en bestemt forelder.
: nest siste barn ( Nummer ): Velger det angitte barnet til en bestemt forelder som begynner fra slutten av listen over barn.

Mønstervelgerne kan skape noen interessante effekter på nettstedet ditt. Følgende prosedyre tar en rask titt på hva disse velgerne kan gjøre. Det er viktig å huske at du vil se selektorer, inkludert mønstervalgere, ofte, så betrakt dette som et utgangspunkt.

Opprett ExternalCSS. HTML og ExternalCSS. CSS-filer og kopier dem til en ny mappe.
Åpne ExternalCSS. HTML.
Skriv inn følgende kode etter den eksisterende
-taggen i filen og lagre endringene på disken.
```
Ett
To
Tre
Fire
Fem
```
I dette tilfellet legger du til en liste på siden for å muliggjøre lettere gjenkjenning av mønstre. Selvfølgelig er mønstre ikke begrenset til lister eller tabeller. Du kan bruke dem med noe arrangement av objekter som kan låne seg til valg av et mønster.
Åpne ExternalCSS. CSS.

Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

. ListItem: første bokstav {font-size: xx-large;}. ListItem: etter {innhold: "27A8"; skriftstørrelse: x-stor; fargen rød;}. ListItem: nth-child (oddetall) {bakgrunnsfarge: LightBlue;}. ListItem: nth-child (2n + 2) {bakgrunnsfarge: LightGreen;}

Last testsiden.

Du ser effekten av å gjøre stilendringen. For å begynne, starter hvert punkt med et ekstra stort brev.

På slutten av hver kule ser du en spesiell pilkarakter. Legg merke til hvordan CSS bruker 27A8 for å opprette denne karakteren. Når du ser på diagrammer som den på ikreator. com og den på petterhesselberg. com, du ser disse tegnkodene presentert med en & # -kombinasjon i begynnelsen. CSS bruker de samme numeriske koder, men er avhengig av et tilbakeslag (/).

Valget: nth-barn () kan brukes på flere måter. Selv om eksemplet ikke viser det, kan du gi et nummer for å velge ett bestemt barnelement. Men denne velgeren aksepterer også en rekke andre interessante innganger. For eksempel kan du bruke de jevne og odde søkeordene til å velge de jevne eller ulike objektene i en liste.

Du kan også gi en ligning som bruker n for å indikere det nåværende objektet. Når nettleseren skriver inn 0 for n, blir ligningen 2 * 0 + 2 eller element 2. Hvis du vil starte med element 3 istedenfor, bruker du 2n + 3. Ligningen du gir kan være av noe kompleksitet som kreves for å produsere det ønskede resultatet.