CSS: pseudo element dla dziecka

Question

Hejka potrzebuje pomocy z css

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 

Pozdrawiam.

Answer 1

::first-letter - jak juz coś
i działa tylko z elementami blokowymi wystarczy umieć czytać dokumentacje

Comments

nie wiem po co ta opryskliwość, takie dostałem zadnie.

Answer 2

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.

Comments

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

---

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.