CSS-ის კომბინატორები | რა არის "+" და რა არის "~" ?

წინა გაკვეთილში უკვე ვისწავლეთ თუ როგორ მუშაობს CSS-ის ერთერთი კომბინატორი direct child selector (>), დღეს შევეცდები აგიხსნათ კიდევ 2 კომბინატორი, ესენია:

1. adjacent sibling selector (+)
2. general sibling selector (~)

რა არის adjacent sibling selector (+)?

მოცემული სელექტორი გამოიყენება სპეციფიური სელექტორის/თეგის გასასტილად HTML-ში, რომელიც მოსდევს უშუალოდ არჩეულ სელექტორს

მაგალითი:

HTML

<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

CSS

h1 + p {
    color: red;
}

h1 + p ნიშნავს, რომ CSS-ის თვისებები გავრცელდება მხოლოდ პირველ <p> თეგზე <h1> თეგის შემდეგ და არ გავრცელდება სხვა დანარჩენებზე.

გასათვალისწინებელია რომ, "+"-ის შემდეგ არჩეული სელექტორი აუცილებლად უნდა მოსდევდეს "+"-მდე დაწერილ სელექტორს.

მაგალითი:

<h1>Hello world</h1>
<div>Some div</div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

 

ზემოთ მოცემული მაგალითი არ იმუშავებს.

რა არის general sibling selector (~)?

მოცემული სელექტორი CSS-ში გამოისახება "~" სიმბოლოთი, მოცემული სიმბოლო საშუალებას გვაძლევს ვიმოქმედოთ ყველა ელემენტზე, რომელიც მოსდევს მთავარ ელემენტს.

მაგალითი:

HTML

<h1>Hello world</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

CSS

h1 ~ p {
    color: red;
}

ზემოთ მოცემული მაგალითის მიხედვით ყველა თეგი, რომელიც HTML-ში <h1> თეგს მოსდევს მიიღებენ აღნიშნულ CSS თვისებებს, ანუ ტექსტის ფერი გახდება წითელი ფერის.