mirrors/denis.ergin
1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-07 23:38:46 +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

7
src/components/slides/css-basics/border.astro
View file

@ -61,6 +61,11 @@
<p class="base-border-wo-style border-dotted">
style: <code>dotted</code>
</p>
</div>
</section>
<section>
<div class="apply-styles two">
<p class="base-border-wo-style border-inset">
style: <code>inset</code>
</p>
@ -189,7 +194,7 @@
<li>border-start-start-radius -&gt; oben links</li>
<li>border-start-end-radius -&gt; oben rechts</li>
<li>border-end-start-radius -&gt; unten links</li>
<li>border-end-start-radius -&gt; unten rechts</li>
<li>border-end-end-radius -&gt; unten rechts</li>
</ul>
</section>

2
src/components/slides/css-basics/font.astro
View file

@ -81,7 +81,7 @@
<section>
<pre class="css"><code data-trim data-line-numbers is:raw>
.line-height {
line-height: 2rem;
line-height: 20px;
}
</code></pre>
<div class="apply-styles one">

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>