has სელექტორი

:has სელექტორი ირჩევს ელემენტებს, რომლებიც შეიცავენ მინიმუმ ერთ ელემენტს მოცემული სელექტორის მიხედვით, არააუცილებლად პირდაპირ შთამომავალს. რადგან :has არ ეკუთვნის CSS სპეციფიკაციას, თანამედროვე ბრაუზერებში სიჩქარის გასაზრდელად საუკეთესოა მისი ნაცვლად გამოიყენოთ $("თქვენი css-სელექტორი").has(სელექტორი/DOM ელემენტი).

სინტაქსი

ასე ვირჩევთ ელემენტებს:

javascript$(':has(სელექტორი)');

ასე ვირჩევთ ელემენტებს, თუ საჭიროა სელექტორის პირდაპირი ჩადგმა:

javascript$(':has(>სელექტორი)');

მაგალითი

მოდით ავირჩიოთ მხოლოდ ის აბზაცები, რომლებსაც შიგნით აქვთ ტეგი b და დავამატოთ მათ ბოლოში ტექსტი '!!!':

html<p>ტექსტი</p>
<p>ტექსტი</p>
<p><b>მსხვილი</b> ტექსტი</p>
<p><b>მსხვილი</b> ტექსტი</p>

javascript$('p:has(b)').append('!!!');

HTML კოდი ასე გამოიყურება:

html<p>ტექსტი</p>
<p>ტექსტი</p>
<p><b>მსხვილი</b> ტექსტი!!!</p>
<p><b>მსხვილი</b> ტექსტი!!!</p>

იხილეთ ასევე