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

CSS: pseudo element dla dziecka

Cloud VPS
0 głosów
239 wizyt
pytanie zadane 19 czerwca 2019 w HTML i CSS przez Neespa Początkujący (300 p.)

Hejka potrzebuje pomocy z cssfrown

a mianowicie muszę dla wszystkich znaczników strong, które są potomkami znacznika p użyć pseudolementu ::first-letter tak by wyróżnić pierwszą literę.

Problem natomiast w tym ze nie wiem jak?

p > strong
{ 
color: red 
}

to działa i koloruje znacznik strong który jest potomkiem p na czerwono

p:first-letter
{ 
color: red 
}

to również działa i koloruję pierwszą literę znacznika p na czerwono.

p > strong:first-letter
{ 
color: red 
}

natomiast to nie robi nic indecision

Pozdrawiam.

2 odpowiedzi

0 głosów
odpowiedź 19 czerwca 2019 przez mati2762 Mądrala (5,510 p.)
::first-letter - jak juz coś
i działa tylko z elementami blokowymi wystarczy umieć czytać dokumentacje
komentarz 19 czerwca 2019 przez Neespa Początkujący (300 p.)
nie wiem po co ta opryskliwość, takie dostałem zadnie.
0 głosów
odpowiedź 19 czerwca 2019 przez Tomek Sochacki Ekspert (227,490 p.)

trochę źle podchodzisz do tematu, z doświadczenia Ci powiem, że bardzo źle jest uzależniać tak mocno css od struktury html. Co Cię interesuje w css czy stylujesz taki czy inny znacznik? Oczywiście, jest kwestia default styles, ale generalnie pracuj lepiej na klasach, znacznie zmniejszasz w ten sposób zależność html->css i gdy ktoś za chwilę zmodyfikuje lekko html to style nie wymagają mocnych zmian, a czasami nawet wcale.

A co do problemu to zrób inaczej, nadaj tym elementom strong klasę np. <strong class="highlight-first-letter"> ... </strong> i potem w css zrób:

.highlight-first-letter::first-letter {
  // style css dla pierwszej literki
}

W tym przykładzie co podałeś nie widzę praktycznie żadnego uzasadnienia dla konieczności tak silnego wiązania html z css.

komentarz 19 czerwca 2019 przez niezalogowany

Tak jak napisał mati2762 - first-letter działa tylko na elementy blokowe - strong domyślnie nie jest elementem blokowym

1
komentarz 19 czerwca 2019 przez Tomek Sochacki Ekspert (227,490 p.)

ok, moj błąd, ale chodzi mi generalnie o to, aby nie uzależniać css od struktury html tak mocno selektorami. A tutaj w takim razie można zmienić po prostu właściwość display, np.:


.highlight-first-letter {
  display: inline-block;
  &::first-letter {
    font-size: 3rem;
  }
}

i mamy to czego oczekujemy.

Podobne pytania

0 głosów
2 odpowiedzi 231 wizyt
pytanie zadane 19 sierpnia 2018 w HTML i CSS przez bartekDSAXN Użytkownik (560 p.)
0 głosów
2 odpowiedzi 440 wizyt
pytanie zadane 18 sierpnia 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
+1 głos
1 odpowiedź 461 wizyt

93,487 zapytań

142,423 odpowiedzi

322,773 komentarzy

62,908 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

Kursy INF.02 i INF.03
...