Skip to content

Commit c1506f0

Browse files
bjellinebjelline
committed
has selector
1 parent f1d2f88 commit c1506f0

File tree

6 files changed

+345
-7
lines changed

6 files changed

+345
-7
lines changed

‎TODO.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
2+
mehr CSS:
3+
4+
im grid: place-items: center
5+
https://cssbattle.dev/
6+
7+
8+
modal dialog ohne javasciprt schon im 1.smeester
9+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de
10+
11+
ebenso popover
12+
13+
coole touch events testen: https://patrickhlauke.github.io/touch/
14+
15+
16+
17+
18+
119
* achtung: link zum nächsten kapitel funktioniert nicht in der folienansicht, wenn das nächste ein dex.md ist. weils davon keine folie gibt.
220

321
* neue Security Kapitel ausformulieren

‎content/css-layout/selektoren.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ folgende Schreibweisen für Selektoren beschrieben:
1313
|Universal selector|*|Stimmt mit jedem Element überein.|
1414
|Type selectors|E|Stimmt mit jedem E-Element überein|
1515
|Grouping|E, F, G|Stimmt mit jedem E-, sowie jedem F-, sowie jedem G-Element überein. E, F und G könnten auch komplexere Selektoren sein!|
16-
|Descendant selectors|E F|Stimmt mit jedem F-Element überein, das ein Nachfahre eines E-Elements ist, also z.B. `<E>bla <div> <F>hier</F> </div> </E>`.|
16+
|Descendant selectors|E F|Stimmt mit jedem F-Element überein, das ein Nachfahre eines E-Elements ist, also z.B. das F in `<E>bla <div> <F>hier</F> </div> </E>`.|
17+
|Has pseudo class|E:has(F)|Stimmt mit jedem E-Element überein, das einen Nachfahren E hat, also z.B. das E in `<E>bla <div> <F>hier</F> </div> </E>`.|
1718
|Child selectors|E > F|Stimmt mit allen F-Elementen überein, die Kindelemente eines Elements E sind, also z.B. `<E>bla <span>bla</span> <F>hier</F> </E>` .|
1819
|The link pseudo-classes|:link :visited|Stimmt mit Links überein, deren Ziel noch nicht besucht wurde (`:link`), oder deren Ziel bereits besucht wurde (`:visited`).|
1920
|The dynamic pseudo-classes|:active :hover :focus|Stimmt während bestimmter Interaktionen überein: auswahl, Maus-Cursor,....|
@@ -78,6 +79,31 @@ Es gibt noch eine Hand voll weiterer Pseudo Classes:
7879
![Document Object Model und Selektor](/images/css-layout/selector-firstchild.png)
7980

8081

82+
Has Pseudo Class
83+
-------
84+
85+
Die Pseudo Class `:has()` ist die Umkehrung des Descendant Selectors: Mit `div:has(a)` wird der `div` Tag selektiert, falls er einen `a` Tag als Nachkommen hat.
86+
87+
![Document Object Model und has psuedo class](/images/css/selector-has.png)
88+
89+
In `:has(...)` kann man auch kompliziertere Selektoren verwenden, zum Beispiel `select:has(option[value=""]:checked)`. Hier wird ein Select-Tag selektiert, falls von seinen optionen diejenige ausgewählt ist, die den Leeren Wert hat. Siehe [Demo](/images/css/example-has.html).
90+
91+
92+
<htmlcode>
93+
<style>
94+
select:has(option[value=""]:checked) {
95+
border-color: #ddd;
96+
color: #ddd;
97+
}
98+
</style>
99+
<select id="place_type" name="place_type">
100+
<option value>--- Any Place Type ---</option>
101+
<option value="River">River</option>
102+
<option value="Lake">Lake</option>
103+
</select>
104+
</htmlcode>
105+
106+
81107
Adjacent selector
82108
---------
83109

‎content/images/css/example-has.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example: using the :has() selector</title>
6+
<style>
7+
body {
8+
font-family: Verdana, Geneva, Tahoma, sans-serif;
9+
}
10+
11+
select,
12+
button {
13+
width: 100%;
14+
padding: 10px;
15+
margin-top: 5px;
16+
border-radius: 5px;
17+
border: 1px solid #ddd;
18+
}
19+
20+
select:has(option[value=""]:checked) {
21+
color: #ddd;
22+
border-color: #ddd;
23+
}
24+
25+
select:has(option[value=""]:not(:checked)) {
26+
color: black;
27+
border-color: black;
28+
}
29+
30+
#filter-form {
31+
width: 250px;
32+
padding: 20px;
33+
background-color: #f8f9fa;
34+
border-radius: 10px;
35+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<form id="filter-form">
42+
<h3>Filter Fishing Spots</h3>
43+
<label for="place_type">Place Type</label>
44+
<select id="place_type" name="place_type">
45+
<option value>--- Any Place Type ---</option>
46+
<option value="River">River</option>
47+
<option value="Lake">Lake</option>
48+
</select>
49+
<label for="bottom_conditions">Bottom Conditions</label>
50+
<select id="bottom_conditions" name="bottom_conditions">
51+
<option value>--- Any Bottom Conditions ---</option>
52+
<option value="Gravel">Gravel</option>
53+
<option value="Mixed">Mixed</option>
54+
</select>
55+
<label for="species">Species</label>
56+
<select id="species" name="species">
57+
<option value>--- Any Species ---</option>
58+
<option value="Grayling">Grayling</option>
59+
<option value="Asp">Asp</option>
60+
<option value="Brown Trout">Brown Trout</option>
61+
<option value="Wels Catfish">Wels Catfish</option>
62+
<option value="Rainbow Trout">Rainbow Trout</option>
63+
<option value="Danube Salmon">Danube Salmon</option>
64+
<option value="Brook Trout">Brook Trout</option>
65+
<option value="Bleak">Bleak</option>
66+
<option value="Roach">Roach</option>
67+
<option value="Carp">Carp</option>
68+
<option value="Pike">Pike</option>
69+
<option value="Bream">Bream</option>
70+
<option value="Barbel">Barbel</option>
71+
<option value="Perch">Perch</option>
72+
<option value="Zander">Zander</option>
73+
<option value="Burbot">Burbot</option>
74+
<option value="Tench">Tench</option>
75+
<option value="Rudd">Rudd</option>
76+
<option value="Chub">Chub</option>
77+
<option value="Whitefish">Whitefish</option>
78+
</select>
79+
<label for="season">Season</label>
80+
<select id="season" name="season">
81+
<option value>--- Any Season ---</option>
82+
<option value="Spring">Spring</option>
83+
<option value="Winter">Winter</option>
84+
<option value="Summer">Summer</option>
85+
<option value="Autumn">Autumn</option>
86+
</select>
87+
<button type="button" onclick="applyFilters()">Apply
88+
Filters</button>
89+
</form>
90+
</body>
91+
</html>

‎content/images/css/selector-has.png‎

53.2 KB
Loading

0 commit comments

Comments
 (0)