Jak zmienić kolory elementów <ul>?

Question

Witajcie,

chcę w <ul> zawrzeć dwa tagi - jeden z nich nie będzie można kliknać (nr telefonu), a drugi będzie można (adres e-mail).

Stworzyłem coś takiego 

<ul class="navigation__list">
   <p>tel. 123 456 789</p>
    <li class="navigation__item"><a style="text-decoration:none"        href="">test@gmail.com</a></li>

i zastanawiam się:

- czy w <ul> można umieścić tag <p>

- jak zmienić kolor tych dwóch elementów w css na ten sam

Answer 1

- czy w <ul> można umieścić tag <p>

Nie. Cytat dozwolonej zawartości w <ul> ze specki:

Content model:

Zero or more li and script-supporting elements.

---

- jak zmienić kolor tych dwóch elementów w css na ten sam

Jeśli chcesz w taki sam sposób ostylować więcej niż jeden element, to nadaj im tę samą klasę lub użyj selektora listy.

Comments

Dobrze, dziękuje. A jak wtedy wyłączyć możliwość kliknięcia na numer telefonu? Da się to zrobić w css?

---

Element <p> domyślnie nie wywołuje akcji w momencie kliknięcia w niego (tak jak robią to np. <a> lub <button>), więc nie rozumiem co chcesz blokować?

---

Skoro nie można umieszczać <p> w <ul> zamieniłem z powrotem na <li>. I teraz właśnie ten numer telefonu zawarty w <li> chcę zrobić nieklikalny.

---

Możesz umieścić <p> w <li> (wtedy powstanie hierarchia ul > li > p). Pytanie - co ta lista reprezentuje; jaki jest jej kontekst użycia? Od tego zależy, w którym znaczniku najlepiej umieścić telefon.

Nie rozumiem o co Ci chodzi z tym blokowaniem kliknięcia. Jeśli nie podepniesz event listenera do elementu <p>, to klikanie w niego nie wykona żadnej akcji - więc nie wiem, co tutaj chcesz blokować? Może chodzi Ci o zaznaczanie, albo inną formę interakcji, w którą użytkownik może wejść z elementem <p> i ją chcesz zablokować?

---

Tzn. chodzi mi najbardziej o wyłączenie cursor: pointer z tego elementu z nr. telefonu.

Teraz jak mam to <p> z telefonem to nie da się stylować razem z <li>

 

.navigation__list {
  list-style: none;
  margin-top: 60px;
  font-size: 20px;
}

.navigation li a {
  color: black;
  text-decoration: none;
}

 

---

Możesz ustawić cursor: none, aby wyłączyć renderowanie kursora, albo ustawić pointer-events: none, aby wykluczyć element z zostania celem eventów dla urządzeń wskazujących.

---

Teraz jak mam to <p> z telefonem to nie da się stylować razem z <li>

Użyj selektora listy, o którym wspomniałem w odpowiedzi.

Poza tym w tych stylach nie stylujesz <li> bezpośrednio, więc przez "stylować razem z <li>" masz na myśli dziedziczenie?

---

<div class="navigation">
  <ul class="navigation__list">
    <p class="navigation__item"> tel. 123 456 789</p>
      <li class="navigation__item"><a href="">test@gmail.com
  </ul>
</div>

I teraz chcę mieć możliwość zmienienia rozmiaru fontu oraz koloru jednocześnie tych dwóch tagów z elementu <ul>  I dodatkowo wyłączenia tego kursora na numer tel.

---

Skoro nadałeś tę samą klasę navigation__item elementom <p> i <li>, to po prostu ją ostyluj w CSS. W czym tu jest problem? Aby wyłączyć obsługę kursora tylko elementowi <p>, możesz nadać mu osobną klasę lub zastosować selektor p.nav__item.

---

Tylko dlaczego <p> jest bezpośrednio wewnątrz <ul>, a nie w <li>? Poza tym masz niedomknięte tagi <a> oraz <li>.

---

<div class="navigation">
  <ul class="navigation__list">
    <li><p class="navigation__item"> tel. 123 456 789</p>
    </li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
  </ul>
</div>

 

No właśnie jeśli dam :

.navigation__item {
  color: #23e22de0;
  text-decoration: none;
  
}

to nie styluje się żaden z tych elementów.

A jeśli dam 

.navigation__list {
  list-style: none;
  margin-top: 60px;
  font-size: 20px;
}

to jedynie font-size działa na adresie e-mail

 

Próbuję też

.navigation__list li + p {
  color: #23e22de0;
  
}

ale zmiana koloru  taga <p> nie działa.

---

<div class="navigation">
  <ul class="navigation__list">
     <li class="navigation__item">
       <p> tel. 123 456 789</p>
     </li>

     <li class="navigation__item">
        <a href="">test@gmail.com</a>
     </li>
  </ul>
</div>

.navigation__item a,
.navigation__item p {
  color: #23e22de0;
  text-decoration: none;   
}

.navigation__item p {
  pointer-events: none;
}

 

---

Uff, super. Dziękuję.

Answer 2

<style>
  :root {
    --color-list-item: orange;
  }
  .navigation__list {
    list-style: none;
    margin-top: 60px;
    font-size: 20px;
    pointer-events: none;
    color: var(--color-list-item);
  }
  .navigation__list a {
    text-decoration: none;
    pointer-events: auto;
    color: var(--color-list-item);
  }
</style>
<body>
  <div class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item">tel. 123 456 789</li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
    </ul>
  </div>
</body>

CodePen

Comments

<div class="navigation">
  <ul class="navigation__list">
    <li><p class="navigation__item"> tel. 123 456 789</p>
    </li>
      <li class="navigation__item"><a href="">test@gmail.com</a></li>
  </ul>
</div>

I adekwatnie:

:root {
  --color-list-item: orange;
}
.navigation__list {
  list-style: none;
  margin-top: 60px;
  font-size: 20px;
  text-decoration: none;
  color: var(--color-list-item);
}

i nic się nie dzieję - nie działa zmiana koloru ani text-decoration: none.

---

Musi wskazać jeszcze element <a> i <p> :.navigation__list { ... }  --> .navigation__list a i navigation__list p 

.navigation__item a,
.navigation__item p {
   ...  
}

 

---

Tak, już gotowe. Dzięki serdeczne za odpowiedzi.