⌘K

Praxis zu Kombinationen von CSS-Selektoren

Задание 1

Schreiben Sie einen Selektor, der die Absätze auswählt, die sich innerhalb von div-Elementen befinden. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <p>
    +++
  </p>
</div>

<p>
  ---
</p>
<p>
  ---
</p>
Задание 2

Schreiben Sie einen Selektor, der alle h2 auswählt, die sich innerhalb von div-Elementen befinden. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
</div>
<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 3

Schreiben Sie einen Selektor, der alle Absätze p aus dem Element mit der id block auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div id="block">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 4

Schreiben Sie einen Selektor, der alle h2 aus dem Element mit der id block auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 5

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse bbb auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 6

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse bbb aus dem Element mit der id block auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 7

Schreiben Sie einen Selektor, der alle Absätze p mit der Klasse bbb auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 8

Schreiben Sie einen Selektor, der alle h2 mit der Klasse bbb auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 9

Schreiben Sie einen Selektor, der alle Absätze p mit der Klasse bbb aus dem Element mit der id block auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 10

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse bbb und Elemente mit der Klasse xxx gleichzeitig auswählt (das heißt, Sie müssen die Selektoren durch Kommas gruppieren). Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 11

Schreiben Sie einen Selektor, der alle Absätze p mit der Klasse bbb und gleichzeitig alle h2 mit der Klasse xxx auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 12

Schreiben Sie einen Selektor, der alle Absätze p mit der Klasse bbb aus dem Element mit der id block und gleichzeitig alle Absätze p mit der Klasse xxx aus dem Element mit der id block auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 13

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div class="fff">
  +++
</div>

<h2 class="fff">+++</h2>
<p class="fff">
  +++
</p>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>
Задание 14

Schreiben Sie einen Selektor, der alle Absätze p aus dem Element mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div class="fff">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  ---
</p>
Задание 15

Schreiben Sie einen Selektor, der alle Absätze p mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

html<div id="block">
  <h2>---</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="fff">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  +++
</p>
Задание 16

Schreiben Sie einen Selektor, der alle Elemente mit der Klasse bbb aus dem Element mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
Задание 17

Schreiben Sie einen Selektor, der alle h2 mit der Klasse bbb aus dem Element mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor an folgendem Code: 

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>
BackFehler beim Gruppieren komplexer CSS-SelektorenNextCSS-Selektorpriorität