Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] warunek w css?
SN@JPER^
post 26.04.2015, 21:45:04
Post #1





Grupa: Zarejestrowani
Postów: 266
Pomógł: 0
Dołączył: 4.01.2007
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

Witam.

Jest jakaś reguła warunków w css?

Coś w stylu, że jeśli game.li:hover to inna klasa też zmienia wartości.

Np. 

[HTML] pobierz, plaintext 
  1. .all .menu_left ul li.games:hover{
  2.  
  3.         background-color: #ffb10a;
  4.         color: #000;
  5.  
  6.         .all .menu_left ul li.games span.icon{
  7.             background: url('../images/icon_games.png') no-repeat;
  8.  
  9.        }
  10.  
  11.  }
[HTML] pobierz, plaintext


Ten post edytował SN@JPER^ 26.04.2015, 21:45:28
Go to the top of the page
+Quote Post
Kshyhoo
post 26.04.2015, 21:49:25
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Cytat
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

where:

! - indicates negation of the statement (i.e. NOT) - optional
browser - states which browser the statement targets
'IE' - Internet Explorer
'Gecko' - Gecko based browsers (Firefox, Camino etc)
'Webkit' - Webkit based browsers (Safari, Chrome, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
'Opera' - Opera's browser
'IEMac' - Internet Explorer for the Mac
'Konq' - Konqueror
'IEmob' - IE mobile
'PSP' - Playstation Portable
'NetF' - Net Front
version - which version of the browser in question should be considered
condition - arithmetic operator
lt - Less than
lte - Less than or equal to
eq - Equal to
gte - Greater than or equal to
gt - Greater then


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
com
post 26.04.2015, 21:50:13
Post #3





Grupa: Zarejestrowani
Postów: 3 033
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

to w less albo sass albo scss tongue.gif
Go to the top of the page
+Quote Post
PrinceOfPersia
post 26.04.2015, 22:09:10
Post #4





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----

wszystko fajnie, tylko, że to się akurat da załatwić w czystym CSS:
[CSS] pobierz, plaintext 
  1. .all .menu_left ul li.games:hover{
  2.     background-color: #ffb10a;
  3.     color: #000;
  4. }
  5.  
  6. .all .menu_left ul li.games:hover span icon {
  7.   background: url('../images/icon_games.png') no-repeat;
  8. }
[CSS] pobierz, plaintext

(pseudoklasa :hover wcale nie musi być na końcu deklaracji CSS, może być w środku).

edit:
chociaż i tak pod kątem pisania kodu ładniej by to wyglądało w Sass czy SCSS:

[CSS] pobierz, plaintext 
  1. .all .menu_left ul li.games{
  2.     font-family: sans-serif; //na przykład;
  3.     display: block; // na przykład
  4.     &:hover {
  5.         background-color: #ffb10a;
  6.         color: #000;
  7.         span icon {
  8.           background: url('../images/icon_games.png') no-repeat;
  9.        }
  10.     }
  11. }
[CSS] pobierz, plaintext

w scss nie musisz powtarzać tych samych selektorów, tylko w jednym drzewie masz deklaracje dla elementu normalnie (bez hovera), tam tylko piszesz &:hover i otwierasz klamrę z deklaracjami dla :hover, tam dodajesz kolejne selektory dzieci (span icon) itp.

Ten post edytował PrinceOfPersia 26.04.2015, 22:15:50


--------------------
Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)
Go to the top of the page
+Quote Post
com
post 26.04.2015, 22:14:22
Post #5





Grupa: Zarejestrowani
Postów: 3 033
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

@up zgadza się, ale autor wrzucił składnie która bez problemu podciągnie pod lessa wink.gif a to itak rybka bo potem otrzymujemy po skomplikowaniu własnie taki kod, tylko łatwiej sie pisze wink.gif

Ten post edytował com 26.04.2015, 22:15:40
Go to the top of the page
+Quote Post
PrinceOfPersia
post 26.04.2015, 22:17:12
Post #6





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----

pewnie też, chociaż z lessa mało korzystałem, głównie z sass/scss, więc w tym wrzuciłem przykład.

Ten post edytował PrinceOfPersia 26.04.2015, 22:17:49


--------------------
Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)
Go to the top of the page
+Quote Post
com
post 26.04.2015, 22:19:07
Post #7





Grupa: Zarejestrowani
Postów: 3 033
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

to już kwestia przyzwyczajenia w czy się to pisze tak naprawdę biggrin.gif a ja odnosiłem się do pierwszej części gdzie napisałeś że da się w css smile.gif
Go to the top of the page
+Quote Post
SN@JPER^
post 26.04.2015, 22:26:08
Post #8





Grupa: Zarejestrowani
Postów: 266
Pomógł: 0
Dołączył: 4.01.2007
Skąd: Szczecin

Ostrzeżenie: (0%)
-----

Dzięki, wykorzystałem kod w czystym CSS.

Frameworków jeszcze nie używam, nie umiem.
Go to the top of the page
+Quote Post
tzm
post 26.04.2015, 22:56:25
Post #9





Grupa: Zarejestrowani
Postów: 675
Pomógł: 58
Dołączył: 17.12.2013

Ostrzeżenie: (10%)
X----

Cytat
'IEMac' - Internet Explorer for the Mac

specool.gif STORY

edit: sory, nie mogłem się powstrzymać

Ten post edytował tzm 26.04.2015, 23:04:50
Go to the top of the page
+Quote Post
PrinceOfPersia
post 26.04.2015, 23:28:58
Post #10





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

Ostrzeżenie: (0%)
-----

kiedyś był, na jakiej starej prezentacji Apple widziałem jak się chwalii tym, że i Microsoft Word i Internet Explorer działa na Maku...

Ten post edytował PrinceOfPersia 26.04.2015, 23:29:16


--------------------
Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)
Go to the top of the page
+Quote Post
com
post 26.04.2015, 23:33:31
Post #11





Grupa: Zarejestrowani
Postów: 3 033
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

https://www.wikiwand.com/pl/Internet_Explorer_for_Mac biggrin.gif
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 29.05.2024 - 03:37
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn