CSS-valitsinten yhdistelmien harjoittelu
Kirjoita valitsin, joka valitsee kappaleet,
jotka sijaitsevat div-elementtien sisällä. Tarkista
valitsimesi seuraavalla koodilla:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Kirjoita valitsin, joka valitsee kaikki h2-otsikot,
jotka sijaitsevat div-elementtien sisällä. Tarkista
valitsimesi seuraavalla koodilla:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet elementistä, jonka
id on block. Tarkista valitsimesi seuraavalla
koodilla:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Kirjoita valitsin, joka valitsee kaikki h2-otsikot
elementistä, jonka id on block.
Tarkista valitsimesi seuraavalla koodilla:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Kirjoita valitsin, joka valitsee kaikki elementit,
joiden luokka on bbb. Tarkista valitsimesi
seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki elementit,
joiden luokka on bbb elementistä, jonka id
on block. Tarkista valitsimesi
seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet, joiden luokka on bbb. Tarkista
valitsimesi seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki h2-otsikot,
joiden luokka on bbb. Tarkista valitsimesi
seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet, joiden luokka on bbb elementistä,
jonka id on block. Tarkista
valitsimesi seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki elementit,
joiden luokka on bbb ja elementit, joiden luokka on
xxx samanaikaisesti (eli valitsimet on ryhmitettävä
pilkulla). Tarkista valitsimesi
seuraavalla koodilla:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet, joiden luokka on bbb ja samanaikaisesti
kaikki h2-otsikot, joiden luokka on xxx. Tarkista
valitsimesi seuraavalla koodilla:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet, joiden luokka on bbb elementistä,
jonka id on block ja samanaikaisesti
kaikki p-kappaleet, joiden luokka on xxx
elementistä, jonka id on block.
Tarkista valitsimesi seuraavalla koodilla:
<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>
Kirjoita valitsin, joka valitsee kaikki elementit,
joiden luokka on fff. Tarkista valitsimesi
seuraavalla koodilla:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet elementistä, jonka luokka on fff.
Tarkista valitsimesi
seuraavalla koodilla:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Kirjoita valitsin, joka valitsee kaikki
p-kappaleet, joiden luokka on fff. Tarkista
valitsimesi seuraavalla koodilla:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Kirjoita valitsin, joka valitsee kaikki elementit,
joiden luokka on bbb elementistä, jonka luokka on
fff. Tarkista valitsimesi seuraavalla
koodilla:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Kirjoita valitsin, joka valitsee kaikki h2-otsikot,
joiden luokka on bbb elementistä, jonka luokka on
fff. Tarkista valitsimesi seuraavalla
koodilla:
<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>
