Hvordan bruke display:none til å fjerne enkelte elementer

StrandKonsult: CSS, WordPress, Nettsider

Problemstilling: Siden jeg bruker Facebook sin kommentar-plugin i WordPress så klarer ikke WordPress å vise hvor mange kommentarer jeg har fått på enkelte innlegg. Ser rimelig trist ut på forsiden at alle innleggene mine står med «Ingen kommentar» selv om enkelte har opp til flere kommentarer. Nå er det ikke så viktig for meg at det skal komme frem hvor mange kommentarer jeg har fått men jeg vil heller bare skjule hele greia. Dette er relativt lett med en CSS attributt som heter display:none.

Hvordan bruke display:none til å fjerne enkelte elementer

Element jeg vil fjerne, i dette tilfelle teksten «Ingen kommentarer»

Hvordan bruke display:none til å fjerne enkelte elementer

Høyreklikk på det du vil fjerne og velg Inspect element

Hvordan bruke display:none til å fjerne enkelte elementer

Her ser vi hvilken div class som elementet ligger i. Det vi vil fjerne er da siste elementet i en liste.

Problemet vi nå står ovenfor er at den ene linjen med kode som vi ikke vil vise ikke er alene. Den er inni en div class, i en liste med masse annet vi fortsatt vil beholde. Om vi bruker display:nonepost-meta så blir alt å forsvinne og om vi prøver å treffe listen så blir jo den også borte. Det er her pseudo-klasser kommer inn i spill.

Pseudo-klasser brukes mest til å treffe et element når det er i et vist stadie, som f.eks. når du holder musen over et element. Det finnes mange pseudo-klasser men det er en som er av interesse for oss: last-child.

CSS’en jeg tar i bruk ser slik ut:

.post-meta li:last-child {
display:none;
}

Som du ser så treffer vi altså .post-meta som vi fant frem til ved å bruke Inspect element. Under der igjen så treffer vi den siste <li> som vi finner inne i .post-meta. Når vi da har truffet rett element, så bruker vi display:none til å gjemme det elementet slik at det ikke vises på siden. Resultatet ser du på siden i dag.

Har du forslag til flere slike innlegg så skal du bare legge igjen en kommentar. Abonner gjerne også på bloggen, så får du oppdatering når jeg legger ut nye innlegg.

Roberth Strand

Fra kalde nord skuer en ung mann utover nettet og tar til seg informasjon. Håper mine funn kan hjelpe deg i hverdagen. Spør gjerne om du har spørsmål.