Farbiger Text mit NTH-Child Selektor (CSS Anleitung)

von | Okt 24, 2022 | Design | 0 Kommentare

Inhaltsverzeichnis

Ihr habt sicher schon von diesem NTH Child Selektor gehört, damit lassen sich repetitive Arbeiten leicht abnehmen. Der :nth-child-Selektor wählt das n-te Element zu einem Elternelement aus.

Eine praktische Sache wenn man DIV Klassen ansprechen muss, die den gleichen Klassenname tragen.

Video

HTML

1
2
3
<header>
    <h1 id="mein-text">Eric-Oliver Mächler</h1>
</header>

JS

Ihr könnt nun jeden einzelnen Buchstabe in eine eigene DIV reinpacken, mit der gleichen DIV Klasse oder ihr verwendet dieses kleine Javascript der das für euch erledigt

1
2
3
4
5
<script src="https://unpkg.com/split-type"></script>    
 
<script>
    const myText = new SplitType('#mein-text')
</script>

CSS

Damit alles zentriert wird verwende ich das hier

1
2
3
4
5
6
header {
    display: grid;
    place-content: center;
    height: 100vh;
 
}

Und der Titel wird eingefärbt mit:

1
2
3
h1 {
    font-size: 7rem;
}

Und hiermit wird der NTH Child Selektor angesprochen

1
2
3
4
5
6
7
8
9
10
11
12
.char:nth-child(1), .char:nth-child(6)
    {
        color: green;
    }
.char:nth-child(2), .char:nth-child(7)
    {
        color: blue;
    }
    .char:nth-child(3), .char:nth-child(8)
    {
        color: red;
    }




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert