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

Jak dodać klasę do pseudoelementu before?

Object Storage Arubacloud
0 głosów
314 wizyt
pytanie zadane 23 lipca 2016 w HTML i CSS przez NTXFN Gaduła (3,430 p.)

Mam kod: 

<div>Text.</div>

Chciałbym dodać białą linię po lewej stronie elementu div. to oczywiście uproszczona wersja tego co zamierzam. Wykorzystam tę technikę do stworzenia menu. Linie będą oddzielały od siebie przyciski tego menu. Menu będzie listą stworzoną na podstawie elementu <ul> a przyciski to <li>. Problem polega na tym że linie mają występować po lewej stronie elementów, ale nie przy pierwszym z nich. Mam też przyciski z napisami "rejestracja" i "logowanie" wyrównanie do prawej strony za pomocą float right. Linie będą trochę mniejsze niż element i wyśrodkowane marginesami (górnym i dolnym). Elementy wyśrodkowane do prawej powinny mieć linie z prawej z wyjątkiem ostatniego elementu lub po lewej z wyjątkiem pierwszego. Może się to wydawać łatwe jednak trzeba stworzyć bardzo wiele elementów :after a żeby jeden usunąć nie wystarczy zmienić jednej wartości elementu lecz jego pseudoelementu :before (oczywiście wartość border-left). Oto przykładowy seudoelement:

div:before {
	display: block;
	float: left;
	border-left: 5px solid white;
	width: 5px;
	overflow: hidden;
	content: ".";
	box-sizing: border-box;
}

To jest całkiem proste, ale jeśli miałbym to powtórzyć kilka razy to kod robi się niezbyt czytelny a niewiele robi.
Czy da się poprzez CSS jakoś dodać klasę do tego elementu lub ją usunąć? Wiem, że pewnie dało by się to zrobić za pomocą JavaScript-u i jego funkcji querySelector("div:before") i class.toggle("after-element"). Ale czy to jest konieczne? 

1 odpowiedź

+1 głos
odpowiedź 23 lipca 2016 przez Comandeer Guru (602,560 p.)
wybrane 23 lipca 2016 przez NTXFN
 
Najlepsza

Co do kresek z lewej strony: wystarczy ją nadawać przy pomocy selektora li + li::before. Co do ostatniej po prawej: wystarczy nadawać przy pomocy selektora li:not(:last-child).

Nie da się nadać klasy pseudoelementowi, ale przecież można nadać klasę li, div.

komentarz 23 lipca 2016 przez NTXFN Gaduła (3,430 p.)
No tak, zapomniałem że można używać selektora + z ::before. Nie rozumiem tylko ostatniego zdania. Elementy listy to będą li a nie div. Z divem to był przykład by wszyscy zrozumieli o co mi chodzi. Z klasą chodziło mi o to by wykorzystać jeden pseudoelemnent kilka razy - jakbym nie mógł użyć selektorów do tego wszystkiego, albo ze względu na czytelność kodu.

PS: Czy to nie Pan napisał tę książkę: http://helion.pl/ksiazki/javascript-programowanie-zaawansowane-tomasz-comandeer-jakut,jascpz.htm?utm_campaign=videopoint&utm_medium=redirect&utm_source=
1
komentarz 23 lipca 2016 przez Comandeer Guru (602,560 p.)
Przecież klasę można dać elementowi, który zawiera pseudoelement i tym sposobem stylować pseudoelementy. Tutaj nie ma żadnego problemu.

 

Tak, to moja książka.
komentarz 23 lipca 2016 przez NTXFN Gaduła (3,430 p.)

Ach no tak! Że też na to nie wpadłem. Chodzi o coś takiego: 

li.menu_element.line {
/*Ten element może mieć 2 klasy a druga z nich to dodane before*/
}

li.line:before {
 /*...*/
}

 

Chyba ją kupię. 

1
komentarz 23 lipca 2016 przez Comandeer Guru (602,560 p.)

Raczej .box + .box--have-ozdobnik

Podobne pytania

+1 głos
3 odpowiedzi 2,273 wizyt
pytanie zadane 13 września 2015 w HTML i CSS przez molaki Obywatel (1,700 p.)
0 głosów
1 odpowiedź 225 wizyt
pytanie zadane 7 października 2019 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)
0 głosów
2 odpowiedzi 798 wizyt

92,694 zapytań

141,606 odpowiedzi

320,106 komentarzy

62,051 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!

...