Home » Artikel CSS » Adjacent Sibling Selector CSS

Monday, June 11, 2012

Adjacent Sibling Selector CSS

Adjacent sibling selector merupakan selector tambahan di CSS2, dia mempunyai bentuk berikut:

E1 + E2

Di mana E2 adalah elemen yang terkena dampak dari aturan CSS. E2 akan terkena dampak oleh aturan CSS jika penulisan E2 berada setelah penulisan E1 dan jika E1 dan E2 mempunyai elemen Parent yang sama.

Di bawah ini contoh untuk memberikan dampak aturan CSS untuk elemen P yang posisinya di setelah elemen H1, dan kedua elemen tersebut mempunyai elemen Parent yang sama, yaitu BODY:

<HTML> <HEAD> <STYLE type="text/css"> H1+P { color: blue; } </STYLE> </HEAD> <BODY> <H1>Judul level 1</H1> <P>Alinea 1.</P> <P>Alinea 2.</P> </BODY> </HTML>

Contoh di atas, 'Alinea 1.' yang terkena dampak aturan CSS. Tetapi untuk contoh di bawah ini 'Alinea 2.' yang terkena dampak aturan CSS:

<HTML> <HEAD> <STYLE type="text/css"> H1+P+P { color: blue; } </STYLE> </HEAD> <BODY> <H1>Judul level 1</H1> <P>Alinea 1.</P> <P>Alinea 2.</P> </BODY> </HTML>

Contoh di bawah ini yang terkena dampak aturan CSS adalah 'Alinea 4.', karena berdasar sintaks yang ada elemen yang terkena dampak aturan CSS adalah elemen yang berada di setelah elemen P yang CLASS-nya 'myClass':

<HTML> <HEAD> <STYLE type="text/css"> H1+P+P { color: blue; } </STYLE> </HEAD> <BODY> <H1>Judul level 1</H1> <P CLASS="myClass">Alinea 1.</P> <P>Alinea 2.</P> </BODY> </HTML>
Posted by at