Prakses uzdevumi par CSS selektoru kombinācijām
Uzrakstiet selektoru, kas izvēlēsies rindkopas,
atrodas iekšā divos div. Pārbaudiet
savu selektoru uz šāda koda:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visus h2,
atrodas iekšā divos div. Pārbaudiet
savu selektoru uz šāda koda:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p no elementa ar id, vienāds ar
block. Pārbaudiet savu selektoru uz šāda
koda:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visus h2
no elementa ar id, vienāds ar block.
Pārbaudiet savu selektoru uz šāda koda:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi bbb. Pārbaudiet savu selektoru
uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi bbb no elementa ar id,
vienāds ar block. Pārbaudiet savu selektoru
uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p ar klasi bbb. Pārbaudiet
savu selektoru uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus h2
ar klasi bbb. Pārbaudiet savu selektoru
uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p ar klasi bbb no elementa
ar id, vienāds ar block. Pārbaudiet
savu selektoru uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi bbb un elementus ar klasi
xxx vienlaicīgi (tas ir, nepieciešams sagrupēt
selektorus ar komatu). Pārbaudiet savu selektoru
uz šāda koda:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p ar klasi bbb un vienlaicīgi
visus h2 ar klasi xxx. Pārbaudiet
savu selektoru uz šāda koda:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p ar klasi bbb no elementa
ar id, vienāds ar block un vienlaicīgi
visas rindkopas p ar klasi xxx
no elementa ar id, vienāds ar block.
Pārbaudiet savu selektoru uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi fff. Pārbaudiet savu selektoru
uz šāda koda:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p no elementa ar klasi fff.
Pārbaudiet savu selektoru uz
šāda koda:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visas rindkopas
p ar klasi fff. Pārbaudiet
savu selektoru uz šāda koda:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi bbb no elementa ar klasi
fff. Pārbaudiet savu selektoru uz šāda
koda:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Uzrakstiet selektoru, kas izvēlēsies visus h2
ar klasi bbb no elementa ar klasi
fff. Pārbaudiet savu selektoru uz šāda
koda:
<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>
