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

Stylizacja a w ul > li elementu o dwóch klasach

VPS Starter Arubacloud
0 głosów
560 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Witam,
muszę wystylizować link którego styl określony jest w dwóch klasach. Elementem tym jest li (list item) w liście która konstruuje menu. Parę rzeczy już zmieniłem, ale samo łącze linka determinuje wcześniej ustalona definicja a.
Co więcej, całość jest w Joomla, więc custom.css daje mi tylko ograniczone możliwości.

Pytanie brzmi - jakie w CSS wpisać kombo, aby określić atrybuty tego elementu?  Z góry dzięki za dopowiedzi

<div class="sp-module-content">
	<ul id="middle menu" class="nav menu">
		::before
			<li class="item-118">
				<a href="/www orla/index.php/kontakt-menu-middle">
					::before
					Zadzwoń: 61 666 666
				</a>
			</li>
			<li class="item-119">...</li>
			<li class="item-120">...</li>
			::after
	</ul>
</div>
.nav.menu > li
{
float:left;
list-style-type:none;
padding:20px;
background-color:#3B4952;
color: red;
}

.nav.menu
{
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
background-color:#3B4952;
width:50%;
color: red;
}

.nav + .menu > ul > li > a         <!-- TU WŁAŚNIE JEST PROBLEM-->
{
color:#fff;
text-decoration:none;
list-style-type:none;
}

 

2 odpowiedzi

+2 głosów
odpowiedź 17 października 2019 przez mordimer Mądrala (5,720 p.)

Najprościej tak :

.sp-module-content .nav li a {

 //twoj kod

}

 

komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Działa, dzięki. Choć nie wiem czemu zadziałały wszystkie atrybuty poza list-style-type i nadal jest arrow.
jest na to może jakiś sposób?
komentarz 17 października 2019 przez mordimer Mądrala (5,720 p.)
Bo tamtym kodem łapiesz link a nie element listy ..  To ci złapie te elementy:

.sp-module-content .nav li{
        list-style-type: none
 }
komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Interesujące rzeczy się dzieją po zastosowaniu tego. Wszelkie atrybuty mogę w końcu zmieniać (jak font-size, font-weight), ale list-style-type:none, nadal nie daje rezultatu. Czy pseudoelement ::before nie będzie tu złej roboty robił? Firebug wskazuje, że ten element jest za ten znacznik (arrow) odpowiedzialny. Można go jakoś wykluczyć?
komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Zastosowałem :
.sp-module-content .nav li a::before
{
display:none;
}

i wszystko bangla:)
Dzięki za porady!
+1 głos
odpowiedź 17 października 2019 przez pablop76 VIP (123,400 p.)
edycja 17 października 2019 przez pablop76

Dodaj przyrostek klasy modułu i zwiększ specyficzność. Bo jak użyjesz modułu do innego menu to znowu będziesz miał problem.

 id="middle menu" czy to jest poprawne id?

komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Spróbowałem i mi całość zniknęła. Pewnie przez zmiany, które już w custom.css wprowadziłem. Jak nie uda się z tym z czym teraz kombinuję, wtedy się pobawię z opcją którą proponujesz.
Dzięki!
komentarz 17 października 2019 przez pablop76 VIP (123,400 p.)
Pamiętaj o spacji przed nową klasą, bo inaczej zmieniasz istniejącą.

Podobne pytania

0 głosów
3 odpowiedzi 1,175 wizyt
0 głosów
1 odpowiedź 170 wizyt
0 głosów
3 odpowiedzi 547 wizyt

93,028 zapytań

141,991 odpowiedzi

321,294 komentarzy

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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...