mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-09 09:08:47 +00:00
Code Activity

fix(slides): various style fixes + additional examples for nth-child

Browse source
This commit is contained in:
Denis Ergin 2025-01-21 19:29:22 +01:00
parent 0b054ba49d
commit bd5253f71e
4 changed files with 49 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/slides/css-selectors-advanced/index.astro
View file

@ -139,6 +139,24 @@ import MediaQueries from './media-queries.astro';
}
}
.container.nth {
&.nth-2n .child:nth-child(2n) {
background-color: rgb(126, 154, 240);
}
&.nth-2n\+1 .child:nth-child(2n+1) {
background-color: rgb(126, 154, 240);
}
&.nth-n\+4 .child:nth-child(n+4) {
background-color: rgb(126, 154, 240);
}
&.nth--n\+3 .child:nth-child(-n+3) {
background-color: rgba(126, 154, 240);
}
}
&.not {
p:not(.important) {
background-color: #282;

32
src/components/slides/css-selectors-advanced/pseudo.astro
View file

@ -162,16 +162,33 @@ import NthBox from "./nth-box.astro"
<p><code>An+B</code>, dabei ist <code>n</code> "gedanklich" eine natürliche Zahl</p>
</section>
<section>
<section class="apply-styles pseudo">
<p>Beispiele:</p>
<hr>
<p><code>:nth-child(2n)</code> <br>- Selektiert jedes 2. Element (even)</p>
<hr>
<div class="container nth nth-2n">
<NthBox amount={5} />
</div>
</section>
<section class="apply-styles pseudo">
<p><code>:nth-child(2n + 1)</code> <br>- Selektiert jedes 2. Element, beginnend ab dem 1. Element (odd)</p>
<hr>
<p><code>(n+7)</code> <br>- Selektiert das 7. und alle darauffolgenden Elemente</p>
<hr>
<div class="container nth nth-2n+1">
<NthBox amount={5} />
</div>
</section>
<section class="apply-styles pseudo">
<p><code>(n+7)</code> <br>- Selektiert das 4. und alle darauffolgenden Elemente</p>
<div class="container nth nth-n+4">
<NthBox amount={5} />
</div>
</section>
<section class="apply-styles pseudo">
<p><code>(-n+3)</code> <br>- Selektiert die ersten drei Elemente</p>
<div class="container nth nth--n+3">
<NthBox amount={5} />
</div>
</section>
<section>
@ -447,13 +464,12 @@ import NthBox from "./nth-box.astro"
<section>
<pre class="css"><code data-trim data-line-numbers is:raw>
p:where(.test) {
background-color: black;
background-color: white;
}
p {
background-color: #002;
color: white;
}
</code></pre>
</section>