Ste­phan Hel­ler Frei­be­ruf­li­cher Front­end-Ent­wick­ler @dai­k_­de

SCREENGUIDE - - Events -

Seit CSS 2.1 ste­hen die Kom­bi­na­ti­on-Se­lek­to­ren Kind­s­e­lek­tor (Child com­bi­na­tor) p > strong { ...} so­wie der di­rek­te Ge­schwis­ter­s­e­lek­tor (Ad­ja­cent si­bling com­bi­na­tor) h1 + ol { ...} zur Ver­fü­gung. Mit CSS3 ha­ben Font­end-Ent­wick­ler vie­le neue Se­lek­to­ren be­kom­men, mit de­nen man „fast” al­les tun kann. Doch al­le Se­lek­to­ren ha­ben eins ge­mein­sam: Die HTML-Ele­men­te müs­sen in ei­ner be­stimm­ten Hier­ar­chie zu­ein­an­der ste­hen, da­mit CSSS­e­lek­to­ren grei­fen kön­nen. Was heu­te lei­der noch nicht geht, ist, auf ein be­lie­bi­ges Ele­ment, das im DOM vor­kommt, im nach­fol­gen­den Qu­ell­text zu re­agie­ren, auch wenn dies nicht in der ei­ge­nen El­tern-Kind-Hier­ar­chie liegt. Am Bei­spiel ist es ein­fa­cher zu zei­gen:

HTML

<ar­ti­cle> <h1>Mei­ne Über­schrift</h1> <p>Dies ist ein

<strong class="hin­weis">Hin­weis</strong>.</p> </ar­ti­cle> <foo­ter>

<p>Hin­wei­se zum In­halt ...</p> </foo­ter> Wä­re es nicht schön, wenn wir so et­was schrei­ben könn­ten:

CSS

.hin­weis -> foo­ter p { co­lor: red; } Die­ser Ap­pe­ar-Af­ter-Se­lek­tor -> ist frei er­fun­den, funk­tio­niert al­so nicht. Aber das Bei­spiel zeigt di­rekt ei­nen An­wen­dungs­fall: Im­mer dann, wenn auf der Sei­te die Klas­se „hin­weis” auf­taucht, un­ab­hän­gig wo, fär­be ich nach­fol­gend den Text im Foo­ter ein. Na, und wenn man sich ein­mal was wünscht, wie wä­re es mit ei­nem Ap­pe­ar-Be­fo­re-Selec­tor (<-). Die­ser Se­lek­tor könn­te ge­nutzt wer­den, wenn im vor­he­ri­gen Qu­ell­text ei­ne be­stimm­te Klas­se auf­taucht. Oder gar ein On-Pa­ge Se­lek­tor: <->. Ein sol­cher Se­lek­tor könn­te auf ein Vor­kom­men der Klas­se „hin­weis” re­agie­ren, und das un­ab­hän­gig da­von, ob vor oder hin­ter der Stel­le im DOM.

CSS

.hin­wei­se <- he­a­der p

{ co­lor: red} .hin­weis <-> p.ad­vice

{ co­lor: red}

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.