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

CSS: pseudo element dla dziecka

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
135 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 (229,600 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 argeento VIP (111,020 p.)

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 (229,600 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 124 wizyt
pytanie zadane 19 sierpnia 2018 w HTML i CSS przez bartekDSAXN Użytkownik (560 p.)
0 głosów
2 odpowiedzi 113 wizyt
pytanie zadane 18 sierpnia 2020 w HTML i CSS przez KosaTV Obywatel (1,260 p.)
+1 głos
1 odpowiedź 211 wizyt

91,290 zapytań

139,959 odpowiedzi

315,203 komentarzy

60,740 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...