CSS সিলেক্টর কম্বিনেশনে অনুশীলন

Задание 1

একটি সিলেক্টর লিখুন যা div এর ভিতরে অবস্থিত প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

<p>
  ---
</p>
<p>
  ---
</p>

Задание 2

একটি সিলেক্টর লিখুন যা div এর ভিতরে অবস্থিত সমস্ত h2 নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

<h2>---</h2>
<p>
  ---
</p>

Задание 3

একটি সিলেক্টর লিখুন যা block id সহ এলিমেন্ট থেকে সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

<h2>---</h2>
<p>
  ---
</p>

Задание 4

একটি সিলেক্টর লিখুন যা block id সহ এলিমেন্ট থেকে সমস্ত h2 নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা bbb ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা block id সহ এলিমেন্ট থেকে bbb ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা bbb ক্লাস সহ সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা bbb ক্লাস সহ সমস্ত h2 নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা block id সহ এলিমেন্ট থেকে bbb ক্লাস সহ সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা bbb ক্লাস সহ সমস্ত এলিমেন্ট এবং xxx ক্লাস সহ সমস্ত এলিমেন্ট একই সাথে নির্বাচন করবে (অর্থাৎ কমা দ্বারা সিলেক্টর গোষ্ঠীভুক্ত করতে হবে)। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা bbb ক্লাস সহ সমস্ত p প্যারাগ্রাফ এবং একই সাথে xxx ক্লাস সহ সমস্ত h2 নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা block id সহ এলিমেন্ট থেকে bbb ক্লাস সহ সমস্ত p প্যারাগ্রাফ এবং একই সাথে block id সহ এলিমেন্ট থেকে xxx ক্লাস সহ সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা fff ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

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

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>

Задание 14

একটি সিলেক্টর লিখুন যা fff ক্লাস সহ এলিমেন্ট থেকে সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

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

Задание 15

একটি সিলেক্টর লিখুন যা fff ক্লাস সহ সমস্ত p প্যারাগ্রাফ নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

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

Задание 16

একটি সিলেক্টর লিখুন যা fff ক্লাস সহ এলিমেন্ট থেকে bbb ক্লাস সহ সমস্ত এলিমেন্ট নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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

একটি সিলেক্টর লিখুন যা fff ক্লাস সহ এলিমেন্ট থেকে bbb ক্লাস সহ সমস্ত h2 নির্বাচন করবে। নিম্নলিখিত কোডে আপনার সিলেক্টর পরীক্ষা করুন:

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>