Relació de selectors XPath i CSS
Publicat el 09/07/2008
Els dos llenguatges de selecció de documents XML (i d'HTML) que proporciona el W3C són divergents en sintaxi. Aquesta taula intenta recollir els casos més usuals d'ambdós móns.
| Significat | CSS | XPath |
|---|---|---|
| Qualsevol element | * |
* |
| Qualsevol element /e | e |
//e |
| Qualsevol element /f descendent d'/e | e f |
//e//f |
| Qualsevol element /f fill d'/e | e > f |
//e/f |
| El primer element d'una col·lecció si aquest és un element /e | e:first-child |
//*[1]/self::e |
| El primer element /e d'una col·lecció. | No existeix en CSS 2.1, en CSS 3 seria e:first-of-type |
//e[1] |
| El darrer fill d'una col·lecció si aquest és un element /e | No existeix en CSS 2.1, en CSS 3 seria e:last-child |
//*[last()]/self::e |
| El darrer element /e d'una col·lecció. | No existeix en CSS 2.1, en CSS 3 seria e:last-of-type |
//e[last()] |
| L'element /e si aquest és un hipervincle i no està visitat. | e:link |
No existeix en XPath 2.0 |
| L'element /e si aquest és un hipervincle i està visitat. | e:visited |
No existeix en XPath 2.0 |
| L'element /e durant accions de l'usuari. | e:hover, e:active, e:focus |
No existeix en XPath 2.0 |
| L'element /e amb l'idioma c (l'idioma pot ser heredat d'un ancessor per tant no funciona un selector d'atribut). | e:lang(c) |
//e[lang(c)] |
| L'element /f amb un element /e germà que el precedeix inmediatament. | e + f |
//e/following-sibling::*[1]/self::f |
| L'element /f amb un element /e germà que el succeeix inmediatament. | No existeix en CSS 2.1 | //e/preceding-sibling::*[1]/self::f |
| Tots els elements /f amb un element /e germà que els precedeix. | No existeix en CSS 2.1, en CSS 3 seria e ~ f |
//e/following-sibling::f |
| Tots els elements /f amb un element /e germà que els succeeix. | No existeix en CSS 2.1 | //e/preceding-sibling::f |
| Qualsevol element /e amb un element /f fill. | No existeix en CSS 2.1 | //e[f] |
| Qualsevol element /e amb un atribut @attr. | e[attr] |
//e[@attr] |
| Qualsevol element /e amb un atribut @attr amb valor “foo”. | e[attr="foo"] |
//e[@attr="foo"] |
| Qualsevol element /e amb un atribut @attr amb una llista de valors separats per espais on un d'ells és exactament “foo”. | e[attr~="foo"] |
//e[tokenize( @attr, "\s+" ) = "foo"] Només funciona en XPath 2.0 |
//e[contains( concat( " ", @attr, " " ), concat( " ", "foo", " " ) )] |
||
| Qualsevol element /e amb un atribut @attr amb una llista de valors separats per guions on el primer valor és “foo”. | e[attr|="foo"] |
//e[tokenize( @attr, "-" )[1] = "foo"] Només funciona en XPath 2.0 |
//e[@attr = "foo" or starts-with( @lang, concat( "foo", "-" ) )] |
||
| Qualsevol element /e amb un atribut @class amb valor “foo”. | e.foo (només en X/HTML) |
//e[tokenize( @class, "\s+" ) = "foo"] Només funciona en XPath 2.0 |
//e[contains( concat( " ", @class, " " ), concat( " ", "foo", " " ) )] |
||
| Qualsevol element /e amb un atribut @id amb valor “foo”. | e#foo |
//e[@id="foo"] |
id("foo") |
||
| Qualsevol element /e que no tingui cap fill /f | No existeix en CSS 2.1 | //e[not( f )] |
| Qualsevol element /e que no tingui cap atribut @attr | No existeix en CSS 2.1 | //e[not( @attr )] |
| Qualsevol element /e o /f | e, f |
//e | //f |
| La primera lletra d'un element /e | e:first-letter |
No existeix en XPath 2.0 |
| La primera línia d'un element /e | e:first-line |
No existeix en XPath 2.0 |
XPath no té equivalent per cap pseudo-classe degut a que està pensat per seleccionar nodes i atributs d'un arbre existent, no pas d'estats ni d'slots computats (com passa amb els pseudo-elements).
Comentaris