• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zmienić kolory elementów <ul>?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
1,063 wizyt
pytanie zadane 27 września 2020 w HTML i CSS przez Kubs Mądrala (5,190 p.)

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

2 odpowiedzi

0 głosów
odpowiedź 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

- 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.

komentarz 27 września 2020 przez Kubs Mądrala (5,190 p.)
Dobrze, dziękuje. A jak wtedy wyłączyć możliwość kliknięcia na numer telefonu? Da się to zrobić w css?
komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)
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ć?
komentarz 27 września 2020 przez Kubs Mądrala (5,190 p.)
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.
komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

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ć?

komentarz 27 września 2020 przez Kubs Mądrala (5,190 p.)
edycja 27 września 2020 przez Kubs

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;
}

 

komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

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?

komentarz 27 września 2020 przez Kubs Mądrala (5,190 p.)
<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.

komentarz 27 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

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>.

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)
edycja 28 września 2020 przez Kubs
<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.

1
komentarz 28 września 2020 przez ScriptyChris Mędrzec (190,190 p.)
<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;
}

 

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)
Uff, super. Dziękuję.
0 głosów
odpowiedź 28 września 2020 przez VBService Ekspert (255,840 p.)
<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

komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)
<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.

komentarz 28 września 2020 przez VBService Ekspert (255,840 p.)

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

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

 

1
komentarz 28 września 2020 przez Kubs Mądrala (5,190 p.)
Tak, już gotowe. Dzięki serdeczne za odpowiedzi.

Podobne pytania

0 głosów
3 odpowiedzi 1,235 wizyt
0 głosów
1 odpowiedź 1,627 wizyt
0 głosów
2 odpowiedzi 598 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

93,100 zapytań

142,064 odpowiedzi

321,526 komentarzy

62,442 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...