CSS attribute selector kreatív felhasználása.

Oké, ennek itt mikroblognak kéne lenni, ez meg hosszú lesz, de ide illik leginkább. Előállt az az eset az életemben, hogy egy kód generált egy unordered list-et, ekképpen:

<div class="game-scrollbox">
 <div class="scroll-title"><?php the_title(); ?> faji képességek</div>
 <div class="scroll-content">
 <?php print_custom_field('racial:formatted_list', array('<li>[+value+]</li>','<ul>[+content+]</ul>') ); ?>
 </div>
 <div class="scroll-footer"></div>
 </div>

Ezt úgy kéne formáznom, hogy minden egyes <li> előtt egyedi, css-ből húzott kép legyen, egy ikon. Ja, és nem tudsz se #id se .class meghatározást adni.

Ugye, hogy ez lehetetlennek hangzik? De megoldható!

Oké, én vagyok az első, aki elismeri, hogy tákolás lesz, ami itt következik. Nem ellenőriztem még FFX és IE alatt, de Chromeban működik. A CSS szabványnak megfelel. Ettől függetlenül tuti, hogy nem menne át a validatoron. Elég a kesergésből, mert mindettől eltekintve, huszáros megoldás következik.

Első lépésnek persze elkezdtem for ciklust generálni, hogy egy beleégetett változó számlálóval változó .class meghatározást hozzon létre. Ezzel elbasztam úgy két órát, mert a kurva kód egyszer futott le, hiába nyomtam $i++ bárhová, nem növelte egynél többre a számlálót, így lett css selectorom, de minden <li> ugyanazt kapta. Ez nem kóser.

Töprengtem már azon is, hogy az oldal dinamikus body id tagjét használva a doboz kap egy pozicionált háttérképet, de ez a responsive kialakításnak nem felelt volna meg, így kuka lett.

Elkezdtem css3 googlezni, miként tudok megszámolni egy listát elemeiben. Nos elmondom, hogy a css készítői ki tudják választani az első sort, elemet, betűt, de a másodikat már nem. Lássuk be, ez elég tré. Újabb zsákutca.

Aztán jött a megvilágosodás! A CSS attribute selectorrral eddig még csak formokat módosítgattam a megjelenésükben, de titlet is lehet, azt pedig a fenti kódból létre tudtam hozni. Eképpen változott a kód:

<div class="game-scrollbox">
 <div class="scroll-title"><?php the_title(); ?> faji képességek</div>
 <div class="scroll-content">
 <?php print_custom_field('racial:formatted_list', array('<li title="[+value+]">[+value+]</li>','<ul>[+content+]</ul>') ); ?>
 </div>
 <div class="scroll-footer"></div>
 </div>

Ezután megfogtam a kiíratott sort és eltettem a css-be, ekképpen:

.game-scrollbox [title='Ínyenc: az ételek szeretete a pandareneknek dupla Well Fed effektet biztosít.'] {
 background: #Fcc;
 }

És láss csudát: működik.