Gyakorlat CSS szelektor kombinációkra
Írj egy szelektort, amely kiválasztja a
div elemen belüli bekezdéseket.
Teszteld a szelektort a következő kódon:
html<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Írj egy szelektort, amely kiválasztja az összes
div elemen belüli h2 elemet.
Teszteld a szelektort a következő kódon:
html<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Írj egy szelektort, amely kiválasztja az összes
p bekezdést a(z) block
id-val rendelkező elemből. Teszteld
a szelektort a következő kódon:
html<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Írj egy szelektort, amely kiválasztja az összes
h2 elemet a(z) block
id-val rendelkező elemből.
Teszteld a szelektort a következő kódon:
html<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező elemet.
Teszteld a szelektort a következő kódon:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező elemet
a(z) block id-val rendelkező
elemből. Teszteld a szelektort a következő kódon:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező p
bekezdést. Teszteld a szelektort a következő kódon:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező h2
elemet. Teszteld a szelektort a következő kódon:
html<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező p
bekezdést a(z) block id-val
rendelkező elemből. Teszteld a szelektort
a következő kódon:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező elemet
ÉS a xxx osztállyal rendelkező elemeket
egyszerre (vagyis csoportosítsd a szelektorokat
vesszővel). Teszteld a szelektort a következő kódon:
html<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező p
bekezdést ÉS egyidejűleg az összes xxx
osztállyal rendelkező h2 elemet.
Teszteld a szelektort a következő kódon:
html<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező p
bekezdést a(z) block id-val
rendelkező elemből ÉS egyidejűleg az összes
xxx osztállyal rendelkező p
bekezdést a(z) block id-val
rendelkező elemből. Teszteld a szelektort
a következő kódon:
html<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
fff osztállyal rendelkező elemet.
Teszteld a szelektort a következő kódon:
html<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
p bekezdést a(z) fff osztályú
elemből. Teszteld a szelektort a következő kódon:
html<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
fff osztállyal rendelkező p
bekezdést. Teszteld a szelektort a következő kódon:
html<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező elemet
a(z) fff osztályú elemből.
Teszteld a szelektort a következő kódon:
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Írj egy szelektort, amely kiválasztja az összes
bbb osztállyal rendelkező h2
elemet a(z) fff osztályú elemből.
Teszteld a szelektort a következő kódon:
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>