პსევდოკლასი empty

პსევდოკლასი empty განსაზღვრავს, როგორ გამოიყურება ცარიელი ელემენტი (რომელიც არ შეიცავს ტექსტს).

სინტაქსი

cssსელექტორი:empty {
  
}

მაგალითი

ამ მაგალითში ბოლო li ცარიელია, მაგრამ მაინც ექნება მარკერი:

html<ul>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li></li>
</ul>

Результат:

მაგალითი

შევცვალოთ ქცევა ცარიელი li ტეგისთვის:

html<ul>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

მაგალითი

ცარიელი li ელემენტების მთლიანად დამალვა:

html<ul>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li>სიის ელემენტი</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

იხილეთ აგრეთვე