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;
}
0 Kommentare