Multi CSS atribut selektori

[kUdtiHaEX]

Imam sledeci HTML:

	<ul id="home-list" class="bsc-general-list">
		<li><a href="#mybsc">My Blue Shield</a></li>
		<li><a href="#tbd-fap">Find Providers</a></li>
		<li><a href="#shop">Shop for Insurance</a></li>
		<li><a href="#why-blue-shield">Why Blue Shield</a></li>
		<li><a target="_self" href='<c:url value="/redirect/contactus.sp" />'>Contact Us</a></li>
		<li><a href="#social">Blue Shield Social Media</a></li>
	</ul>

Ova ulancana lista ima neki svoj CSS medju kojim je najbitniji onaj za "selected" state (ovo radim za Webkit za telefone) i on izgleda ovako:

ul.bsc-general-list li a[selected="true"], ul.bsc-general-list li a:active,
ul.bsc-general-list li.bsc-authorization a[selected], 
ul.bsc-general-list li.bsc-authorization a:active
{
	color: white;
	background: #0082de url(./img/listArrowSelS1.png) no-repeat right center;	
}

I to sve lepo radi za one linkove koji nemaju atribut "target='_self'". Ono sto ja znam je da je moguce koristiti multiple attribute selektore na svemu pa i na "a" elementima, ali ovo:

ul.bsc-general-list li a[target="_self"][selected="true"], 
ul.bsc-general-list li.bsc-authorization a[selected="true"][target="_self"]
{
	color: white !important;
	background: #0082de url(./img/listArrowSelS1.png) no-repeat right center;	
}

prosto ne radi. Ima li neko ideju gde gresim?

 

[holodoc]

Nisam baš siguran da atribut target može bilo kako da utiče na rezultat CSS selekcije ali jesi li probao da prilikom definisanja pseudoselektora definišeš eksplicitno kompletan set selektora za linkove? Vidim da ti nedostaju link i visited pseudoselektori.

a:link[selected="true"] {
...
}
a:visited[selected="true"] {
...
}
a:hover[selected="true"] {
...
}
a:active[selected="true"] {
...
}

Ubedljivo najčešći razlog da nešto ne funkcioniše kako treba sa pesudoselektorima na linkovima je ili izostanak nekog od ovih pseudoselektora ili pogrešan redosled njihovog definisanja.

 

[kUdtiHaEX]

Target moze, po CSS3 specs. Link je definisan a visited mi ne treba.

 

[holodoc]

Link je definisan a visited mi ne treba.

Ne znam kakva je situacija sa browserima na mobilnim telefonima ali pošto je Webkit u pitanju ne bi trebalo da bude prevelike razlike u odnosu na desktop varijante. Konkretno, pošto nisi eksplicitno definisao visited pseudoselektor ostavljaš browseru na volju da za linkove koji su već kliknuti koristi interne stilove pa tvoja pravila možda i funkcionišu ali ih browser ignoriše jer njegovi interni stilovi zbog specificiteta imaju prednost. Imaš li neki alat u browseru koji koristiš za testiranje gde bi mogao da proveriš specificitet selektora (Developer Tools? Firebug?)

Target moze, po CSS3 specs.

Iskreno ovo je prvi put da čujem da bilo koja CSS specifikacija eksplicitno definiše da atribut može pasivno da utiče na rezultat selekcije. Pre bih rekao da je to posledica načina na koji različiti browseri izračunavaju specificitete selektora. U slučaju da ipak grešim može li link do konkretne sekcije CSS3 specifikacije?

 

[kUdtiHaEX]

Visited je definisan globalno i nije ostavljeno browseru na volju. Cak i da jeste, Webkit na telefonima ima svoje stilove kojima override-uje sve.
FireBug i Safari Developer tools su najbolji alati koje imas kada razvijas mobile verzije 🙂

O CSS3 selektorima i sta tacno mozes da definises imas ovde:
http://www.w3.org/TR/css3-selectors/

Examples:

The following attribute selector represents an h1 element that carries the title attribute, whatever its value:

h1[title]
In the following example, the selector represents a span element whose class attribute has exactly the value "example":

span[class="example"]
Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute has exactly the value "Cleveland" and whose goodbye attribute has exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"]
The following CSS rules illustrate the differences between "=" and "~=". The first selector would match, for example, an a element with the value "copyright copyleft copyeditor" on a rel attribute. The second selector would only match an a element with an href attribute having the exact value "http://www.w3.org/".

a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }

Drugim recima mozes da upravljas cime god zelis cak i eksplicitnim vrednostima.

Uostalom probaj i sam - napisi:

a[target] { background:  blue;}

i napravi link u dokumentu koji ima neki target naveden i dobices link sa plavom pozadinom.

 

[holodoc]

Mislim da se nismo dobro razumeli i da sam se ja možda loše izrazio kada sam rekao da "target atribut može bilo kako da utiče na rezultat selekcije". Trebalo je da kažem da "target atribut bilo kako dodatno utiče na rezultat selekcije".

Primera radi da

<a class="name"></a>

bude selektovano sa

a[class~="name"]

a da čisto dodavanje target atributa kao u

<a class="name" target="_self"></a>

može da izazove da selektor više ne radi. U tvom konkretnom slučaju bi značilo da čisto dodvanje target atributa utiče na to da selektor više ne radi.

Koji DTD koristiš na telefonu? XML ili HTML tipa? Jesi li pokušao da koristiš punu formu selected atributa?

ul.bsc-general-list li a[selected="selected"]

Iskreno ponestaje mi ideja mada opet kažem moje iskustvo sa mobilnim verzijama browsera je krajnje ograničeno.

 

[kUdtiHaEX]

Resio sam problem, mada je resenje malo komplikovano i zahtevalo je izmenu JS engine-a koji sam koristio za tranzicije i animacije stranica na telefonu.

 

[Venom]

Posto si resio problem, verovatno nije bitno, ali da li si siguran da ti je onaj prvi primer uopste radio, tj. radio sa [selected], a ne sa :active ?

Drugo, ako si menjao JS framework, ni to ti nije bas pametno.

 

[kUdtiHaEX]

Active nema nikakvu svrhu na Webkitu na mobilnom telefonu, samo selected koliko sam ja imao prilike da vidim.
Menjao -> modifikovao odgovarajuce stvari 🙂