დამწყებთა შეცდომა შთამომავლების სელექტორში

შეხედეთ შემდეგ სელექტორს:

p.eee {
	color: red;
}

თქვენ უკვე უნდა იცოდეთ, რომ ასეთი სელექტორი აირჩევს აბზაცებს eee კლასით. მაგალითად, ამებს:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

ახლა კი შეხედეთ ამ სელექტორს:

p .eee {
	color: green;
}

ეს სელექტორი წინაგან იმით განსხვავდება, რომ მას ტეგის სახელსა და კლასის სახელს შორის დაშორება დგას. ეს დაშორება წარმოადგენს შთამომავლების სელექტორს. ანუ ამ შემთხვევაში ჩვენ ვირჩევთ ყველა ელემენტს eee კლასით, რომლებიც მდებარეობენ აბზაცების შიგნით. მაგალითად, ეს სელექტორი აირჩევს შემდეგ სპანებს:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

კოდის შესრულების შედეგი:

მაშ, კიდევ ერთხელ: p.eee - ასეთი სელექტორი ირჩევს აბზაცებს eee კლასით. ხოლო თუ ასე გავაკეთებ: p .eee, მაშინ ავირჩევ ყველა ელემენტს eee კლასით, რომლებიც მდებარეობენ შიგნით აბზაცების. გაითავისეთ ეს განსხვავება.

აუხსენით, რას ირჩევს სელექტორი ქვემოთ მოცემულ კოდში. შემდეგ დაწერეთ HTML კოდი, რომელიც შეესაბამება ამ სელექტორს. აი კოდი სელექტორით:

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}