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

CSS: pseudo element dla dziecka

Object Storage Arubacloud
0 głosów
175 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,510 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,510 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 153 wizyt
pytanie zadane 19 sierpnia 2018 w HTML i CSS przez bartekDSAXN Użytkownik (560 p.)
0 głosów
2 odpowiedzi 225 wizyt
pytanie zadane 18 sierpnia 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
+1 głos
1 odpowiedź 324 wizyt

92,684 zapytań

141,590 odpowiedzi

320,076 komentarzy

62,044 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...