Autor publikacji: Virtual Patriot - Administrator

Formatujemy wygląd elementów "li"

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

W poprzedniej części kursu CSS zmieniliśmy wygląd elementu ul. Naszym następnym krokiem będzie zmiana wyglądu elementów li.

Wykorzystując selektor potomka i właściwość border-top, sprawimy aby granice wszystkich elementów li stały się widoczne dla naszego wzroku.

Tworzymy następującą regułę CSS:

ul li {
  border-top:1px solid #CCC;
}

Selektor ul li wyszukuje w kodzie HTML każdy element li, który jest potomkiem elementu ul, czyli te elementy li, które są umieszczone w elemencie ul lub w innych elementach znajdujących się w elemencie ul.

Właściwość border-top:1px solid #CCC; spowoduje dodanie górnego obramowania do danego elementu HTML. Obramowanie będzie miało następujące cechy:

1px - szerokość obramowania będzie wynosiła 1 piksel.
solid - stylem obramowania będzie ciągła pojedyncza linia.
#CCC - kolorem obramowania będzie jeden z odcieni koloru szarego.

Elementy po wyświetleniu w oknie przeglądarki i po dodaniu górnego obramowania do elementów li prezentują się następująco:

to jest element - li
to jest element - li
to jest element - li
to jest element - li

Po obejrzeniu elementów "na pierwszy rzut oka" wszystko wygląda prawidłowo. Każdy element li posiada górne obramowania, dzięki czemu widzimy przestrzeń tych elementów, jaką zajmują na ekranie naszego monitora. Lecz nie do końca wszystko jest w porządku, ponieważ przez to, że pierwszy element li posiada górne obramowanie i przez to, że element ul również posiada górne obramowanie, to tworzy się efekt podwójnego obramowania i wygląda to tak, że górna strona obramowania w pierwszym elemencie li wydaję się nieco grubsza od pozostałych.

Jak to naprawić?

Aby nie tworzyć dodatkowego atrybutu klasy czy identyfikatora, to wykorzystamy połączenie selektora potomka i selektora pierwszego dziecka wraz z właściwością, która usunie górne obramowanie z pierwszego dziecka elementu ul.

Tworzymy regułę CSS:

ul li:first-child {
  border-top:none;
}

Właściwość border-top:none; spowoduje usunięcie górnego obramowania z elementu.

Selektor ul li:first-child wyszukuje w kodzie HTML, element li, który jest zarówno potomkiem elementu ul, jak i jest pierwszym dzieckiem swojego rodzica.

Pierwsze dziecko elementu ul zostało zaznaczone w kodzie HTML, który znajduje się pod spodem:

<ul>
  <li>to jest element - li</li> <!-- pierwsze dziecko elementu - ul -->
  <li>to jest element - li</li>
  <li>to jest element - li</li>
  <li>to jest element - li</li>
</ul>

Elementy po wyświetleniu w oknie przeglądarki i po usunięciu górnego obramowania z pierwszego elementu li prezentują się następująco:

to jest element - li
to jest element - li
to jest element - li
to jest element - li

Dzięki utworzeniu poprzedniej reguły CSS, usunęliśmy efekt podwójnego obramowania z pierwszego elementu li umieszczonego w elemencie ul.

Pełny kod HTML z tej części kursu CSS został przedstawiony poniżej. Za pomocą komentarza możemy opisać, do których elementów odwołują się dane reguły CSS, co ułatwi nam ich późniejszą modyfikację.

Składnia komentarza w kodzie CSS wygląda następująco: /* miejsce na komentarz */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
      }

      /* wygląd elementów - li */
      ul li {
        border-top:1px solid #CCC;
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }
    </style>
  </head>

  <body>

    <ul>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
      <li>to jest element - li</li>
    </ul>

  </body>
</html>

W następnej części kursu poznamy elementy a i dodamy je do naszego pionowego menu CSS.