Jak zasady logiki formalnej pojawiają się w CSS – każdy selektor to tak naprawdę mała „formuła logiczna”, określająca, które elementy spełniają dane warunki. Przeanalizuj poniższy kod, a następnie sprawdź czy rozumiesz, wykonując polecenie podane na końcu questa.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Logika → selektory CSS</title>
<style>
body {
font-family: Arial, sans-serif;
}
div {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
/* 1. A: wszystkie p */
#d1 p {
background: lightblue; /* Logika: A */
}
/* 2. A ∧ B: p w div.inner */
#d2 .inner p {
background: lightgreen; /* Logika: A ∧ B */
}
/* 3. A ∨ B: p lub a */
#d3 p,
#d3 a {
background: lightyellow; /* Logika: A ∨ B */
}
/* 4. A ∧ ¬B: p, ale NIE z klasą alert */
#d4 p:not(.alert) {
background: lightpink; /* Logika: A ∧ ¬B */
}
/* 5. A ∧ ¬B ∧ ¬C: a w menu, nie active i nie disabled */
#d5 .menu a:not(.active):not(.disabled) {
background: lightcoral; /* Logika: A ∧ ¬B ∧ ¬C */
}
/* 6. ¬A: wszystko co NIE jest h3 */
#d6 :not(h3) {
background: lightseagreen; /* Logika: ¬A */
}
/* 7. ¬A ∧ B: button.special, który NIE jest w form */
#d7 button.special:not(form button) {
background: lightgoldenrodyellow; /* Logika: ¬A ∧ B */
}
/* 8. (A ∧ B) ∧ ¬C: p w article, NIE footnote */
#d8 article p:not(.footnote) {
background: lightcyan; /* Logika: (A ∧ B) ∧ ¬C */
}
/* 9. ¬(A ∨ B): wszystko co nie jest p ani a */
#d9 :not(p):not(a) {
background: lightsteelblue; /* Logika: ¬(A ∨ B) = ¬A ∧ ¬B */
}
/* 10. A ∧ ¬(B ∧ C): a w menu, nie jednocześnie active i disabled */
#d10 .menu a:not(.active.disabled) {
background: lightgray; /* Logika: A ∧ ¬(B ∧ C) */
}
</style>
</head>
<body>
<h1>Przykład selektorów CSS i logiki</h1>
<!-- 10 divów, każdy z prostymi elementami -->
<div id="d1">
<h2>D1</h2>
<p>Paragraf 1</p>
<p class="alert">Paragraf alert</p>
<a href="#">Link 1</a>
<div class="inner"><p>Paragraf w inner</p></div>
</div>
<div id="d2">
<h2>D2</h2>
<p>Paragraf 2</p>
<a href="#">Link 2</a>
<div class="inner"><p>Paragraf w inner</p></div>
</div>
<div id="d3">
<h2>D3</h2>
<p>Paragraf 3</p>
<a href="#">Link 3</a>
</div>
<div id="d4">
<h2>D4</h2>
<p>Paragraf 4</p>
<p class="alert">Paragraf alert</p>
<a href="#">Link 4</a>
</div>
<div id="d5">
<h2>D5</h2>
<div class="menu">
<a href="#">Link normalny</a>
<a class="active" href="#">Link active</a>
<a class="disabled" href="#">Link disabled</a>
</div>
</div>
<div id="d6">
<h2>D6</h2>
<h3>Nagłówek</h3>
<p>Paragraf 6</p>
<a href="#">Link 6</a>
</div>
<div id="d7">
<h2>D7</h2>
<form>
<button class="special">Special w form</button>
</form>
<button class="special">Special poza form</button>
</div>
<div id="d8">
<h2>D8</h2>
<article>
<p>Paragraf w artykule</p>
<p class="footnote">Przypis</p>
</article>
</div>
<div id="d9">
<h2>D9</h2>
<p>Paragraf 9</p>
<a href="#">Link 9</a>
<div>Div 9</div>
</div>
<div id="d10">
<h2>D10</h2>
<div class="menu">
<a href="#">Link 10 normalny</a>
<a class="active disabled" href="#">Link active+disabled</a>
<a class="active" href="#">Link active</a>
<a class="disabled" href="#">Link disabled</a>
</div>
</div>
</body>
</html>Używając narzędzi developerskich w przeglądarce (DevTools – F12 lub RMB > „Zbadaj”) zmodyfikuj lokalnie wygląd skomplikowanej strony (np. opartej na WordPressie). Szczególnie ciekawe będą te elementy strony, które nie mają swojego id, a przypisana klasa jest używana też dla innych elementów, których nie chcesz formatować.
Twój komentarz