Farbiger Text mit NTH-Child Selektor (CSS Anleitung)

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

<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

<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

header {
    display: grid;
    place-content: center;
    height: 100vh;

}

Und der Titel wird eingefärbt mit:

h1 {
    font-size: 7rem;
}

Und hiermit wird der NTH Child Selektor angesprochen

.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;
    }