This commit is contained in:
Philippe Torrel
@@ -0,0 +1,92 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Kombinator Selektoren</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
/* Allgemeine Formatierung */
|
||||
|
||||
/* universal Selektor (*) */
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* descendant combinator (' ') */
|
||||
.menu-main ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* child combinator (>) - direkte Kinderelemente selektieren */
|
||||
.menu-main > ul > li > a {
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
/* adjacent combinator (+) - direktes nachkommendes Geschwisterelement selektieren */
|
||||
h2 + p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* general sibling combinator (~) - alle nachkommenden Geschwisterelemente selektieren */
|
||||
ul.list li:nth-child(1) ~ li img {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Kombinator Selektoren</h1>
|
||||
|
||||
<hr />
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="https://www.google.com">Google </a></li>
|
||||
<li><a href="https://netflix.com">Netflix</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<ul class="sublist">
|
||||
<li><a href="#">Project 01</a></li>
|
||||
<li><a href="#">Project 02</a></li>
|
||||
<li><a href="#">Project 03</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://www.gfn.de">GFN</a></li>
|
||||
<li><a href="#text">Text</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2>Bilder</h2>
|
||||
<p>Erstellte Bilder über Dummyimage.com</p>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
|
||||
</ul>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Selektor - Pseudoklassen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* normal Zustand */
|
||||
/* a:link {
|
||||
color: salmon;
|
||||
} */
|
||||
/*
|
||||
a:visited {
|
||||
color: purple;
|
||||
} */
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
/*
|
||||
a:active {
|
||||
color: steelblue;
|
||||
}
|
||||
*/
|
||||
|
||||
.menu-main {
|
||||
background-color: steelblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
.menu-main ul.list li {
|
||||
border-right: 2px solid #555;
|
||||
}
|
||||
|
||||
/* :last-child | :first-child - letztes oder erstes Kindelement */
|
||||
.menu-main ul.list li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a:hover,
|
||||
.menu-main ul.list li a:focus {
|
||||
color: #2a2a2a;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a:active {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* :nth-child(nte + offset) */
|
||||
/* table tbody tr:nth-child(3n + 2) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
|
||||
/* :nth-child(odd | even) */
|
||||
|
||||
table tbody tr:nth-child(odd) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* :empty */
|
||||
table tbody td:empty {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
table tbody td:empty::after {
|
||||
content: 'no-content';
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* :not */
|
||||
|
||||
/* table tbody tr:not(.selected) {
|
||||
opacity: 0.5;
|
||||
} */
|
||||
|
||||
/* :checked - ausgewählte Checkboxen | Radio-Buttons */
|
||||
input:checked + label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="#">Pseudoklassen</a></li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/Pseudo-elements">Pseudoelemente</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Selektor - Pseudoklassen</h1>
|
||||
<hr />
|
||||
<p>
|
||||
Eine
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>
|
||||
in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand
|
||||
abzufragen. So steht beispielsweise <code>:hover</code> für Elemente, die gerade mit dem Mauszeiger berührt
|
||||
werden.
|
||||
</p>
|
||||
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="current">
|
||||
<td>:nth-child</td>
|
||||
<td>
|
||||
Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul,
|
||||
falls es vom Tag-Typ li ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:first-child</td>
|
||||
<td>Die Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:last-child</td>
|
||||
<td>
|
||||
Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ
|
||||
ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:empty</td>
|
||||
<td>
|
||||
Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von
|
||||
Text wird dabei ebenfalls als Kind-Element betrachtet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="selected">
|
||||
<td>:not(selector)</td>
|
||||
<td>
|
||||
Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im
|
||||
Beispiel würde alles außer span-Elementen ausgewählt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:only-child</td>
|
||||
<td>
|
||||
Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen
|
||||
Eltern-Elementes handelt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:checked</td>
|
||||
<td>Diese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="cb-todo" class="form-check-input" />
|
||||
<label for="cb-todo">Todo: Checkbox verstehen </label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>document.querySelector() vs. element.querySelector()</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>document.querySelector() vs. element.querySelector()</h1>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ul>
|
||||
<ul id="second_list">
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// document.querySelectorAll()
|
||||
const liEls = Array.from(document.querySelectorAll('ul li'));
|
||||
|
||||
console.log(liEls); // => (4) [li, li, li, li]
|
||||
|
||||
const secondListEl = document.querySelector('#second_list');
|
||||
|
||||
// element.querySelectorAll()
|
||||
console.log(Array.from(secondListEl.querySelectorAll('li'))); // => [<li>3</li>,<li>4</li>]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Helferfunktion $ und $$</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Helferfunktion $ und $$</h1>
|
||||
<hr />
|
||||
<h2>Lorem ipsum dolor sit amet.</h2>
|
||||
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
|
||||
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
|
||||
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
|
||||
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// IIFE
|
||||
((jq) => {
|
||||
// Helferfunktion $ und $$
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
$('h1').style.color = 'orange';
|
||||
|
||||
$$('.news').forEach((el) => {
|
||||
el.style.backgroundColor = 'salmon';
|
||||
});
|
||||
|
||||
// $ von jQuery
|
||||
jq('.news').css({
|
||||
backgroundColor: 'yellow',
|
||||
padding: '1rem',
|
||||
});
|
||||
})($); // $ von jQuery
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DOM Selection</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1 id="headline">DOM Selection</h1>
|
||||
<hr />
|
||||
<table class="table table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Methode / Eigenschaft</th>
|
||||
<th>Beschreibung</th>
|
||||
<th>Interface/API</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>querySelector()</code></td>
|
||||
<td>
|
||||
Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht nur Elemente innerhalb des
|
||||
HTML-Teilbaums, auf dessen Wurzelelement <code>querySelector</code> aufgerufen wurde.
|
||||
</td>
|
||||
<td>Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>querySelectorAll()</code></td>
|
||||
<td>
|
||||
Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht nur Elemente innerhalb des
|
||||
HTML-Teilbaums, auf dessen Wurzelelement <code>querySelectorAll</code> aufgerufen wurde.
|
||||
</td>
|
||||
<td>Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.querySelector()</code> (aka $)</td>
|
||||
<td>
|
||||
Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht das gesamte HTML-Dokument.
|
||||
Sollte das Element nicht gefunden werden, ist das Ergebnis <code>null</code>.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.querySelectorAll()</code> (aka $$)</td>
|
||||
<td>
|
||||
Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht das gesamte HTML-Dokument.
|
||||
Die $$-Funktion gibt die gefundenen Elemente als Array mit ebendiesen Elementen zurück. Sollte kein
|
||||
Element gefunden werden, ist das Ergebnis ein leeres Array.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.getElementById()</code></td>
|
||||
<td>
|
||||
Gibt ein <code>Element</code>-Objekt zurück, das dem Element entspricht, dessen <code>id</code>-Attribut
|
||||
mit dem angegebenen String übereinstimmt. Durchsucht das gesamte Dokument; wird kein Element gefunden,
|
||||
ist der Rückgabewert <code>null</code>.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.body</code></td>
|
||||
<td>Gibt das <code><body></code>-Element des aktuellen Dokuments zurück.</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<!-- ul.list>li*4{Listenpunkt 0$} -->
|
||||
<ul class="list">
|
||||
<li>Listenpunkt 01</li>
|
||||
<li>Listenpunkt 02</li>
|
||||
<li>Listenpunkt 03</li>
|
||||
<li>Listenpunkt 04</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
// DOM Selection
|
||||
console.log($('ul.list li')); //=> <li>Listenpunkt 01</li>
|
||||
console.log($$('ul.list li')); //=> [<li>Listenpunkt 01</li>, ...]
|
||||
|
||||
// document.querySelector('css-selector')
|
||||
console.log(document.querySelector('ul.list li')); //=> <li>Listenpunkt 01</li>
|
||||
|
||||
// document.querySelectorAll('css-selector')
|
||||
console.log(Array.from(document.querySelectorAll('ul.list li'))); //=> [<li>Listenpunkt 01</li>, ...]
|
||||
|
||||
// =======================
|
||||
|
||||
// document.getElementById('ID');
|
||||
console.log(document.getElementById('headline')); //=> <h1 id="headline">DOM Selection</h1>
|
||||
|
||||
// =============================
|
||||
|
||||
// document.getElementsByClassName('className')
|
||||
console.log(document.getElementsByClassName('container')); //=> HTMLCollection [div.container.py-5]
|
||||
|
||||
// document.getElementsByTagName('li')
|
||||
console.log(document.getElementsByTagName('li')); //=> HTMLCollection(4) [li, li, li, li]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user