Condividi:

I 'Basic CSS Selectors' seguono gli standard CSS3.
SintassiDescrizione Esempio htmlEsempio jQuery
* Seleziona tutti gli elementi ... $("*").hide() ... nasconde tutti gli elementi della pagina
E Seleziona tutti gli elementi con il tag di nome E <div name=ABC> XYZ </div> $("ABC").hide() ... nasconde l'elemento ABC
E F Seleziona tutti gli elementi con tag di name F che è discendente del tag di nome E <a href='test.htm'> <img src='test.gif'> </a> $('a img') .. seleziona tutti gli elementi img discendenti di un tag a
E>F Seleziona tutti gli elementi con tag di name F che sono figli diretti del tag di nome E (notare bene solo quelli del primo livello di discendenza, quindi questo selector è più 'selettivo' rispetto al precedente) <p><code>ABC</code></p>
lt;code>CDE</code>
$('p > code')
E+F Seleziona tutti gli elementi con tag di name F che è immediatamente preceduto da un fratello con un tag di name E (notare bene devono avere lo stesso padre)
E~F Seleziona tutti gli elementi con tag di name F che è preceduto da un fratello con un tag di name E (notare bene devono avere lo stesso padre)
E.c Seleziona tutti gli elementi E hanno una classe di nome c. Omettendo E è uguale a *.c <div class=ABC> XYZ </div> $(".ABC").hide() ... nasconde l'elemento ABC
E#i Seleziona tutti gli elementi E che ha un id che vale i. Omettendo E è uguale a *#i: quindi tutti gli elementi con ID = i <div id=ABC> XYZ </div> $("#ABC").hide() ... nasconde l'elemento ABC
E,F,G Seleziona tutti gli elementi con tag di name E o F o G $("code, em, strong") .. seleziona tutti
:nth-child(n) Seleziona l'Nsimo figlio <ul>
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
</ul>
$('li:nth-child(2)') .. seleziona tutti gli elementi LI che sono in seconda posizione
:first-child Seleziona il primo figlio <ul>
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
</ul>
$('li:first-child')
:last-child Seleziona l'ultimo figlio <ul>
<li>elem 1</li>
<li>elem 2</li>
<li>elem 3</li>
</ul>
$('li:last-child')
:only-child Seleziona solo quei figli che sono unici di un padre <ul>
<li>elem 1</li>
<li>elem 2</li>
</ul>
<ul>
<li>elem 1</li>
</ul>
$('li:only-child')
:not(s) Seleziona tutti gli elementi diversi dal selettore s $('li:not(.miaclasse)')
:empty Seleziona tutti gli elementi che non hanno figli (NB: compresi i nodi di testo) $('p:empty')
E[a] Seleziona tutti gli elementi E che hanno un attributo a con qualsiasi valore $("img[alt]") .. seleziona tutte le immagini che hanno un attributo alt
E[a=v] Seleziona tutti gli elementi E che hanno un attributo a con esattamente il valore v $('input[@name=myname]')
E[a^=v] Seleziona tutti gli elementi E che hanno un attributo a il cui valore inizia esattamente per v $('input[@name^=my]')
E[a$=v] Seleziona tutti gli elementi E che hanno un attributo il cui valore termina esattamente con v $('a[@href$=index.htm]')

I siti collegati

PhotoFromTheWorld.com: foto da tutto il Mondo
100s.it: le classifiche i migliori 100
Sport-Team.net: sport ed eventi sportivi
www.ilDolceAmico.it: cimitero virtuale per animali
www.risus.it: ridi che ti passa

Copyright © abspace - Design by alberto bellina