No entiendo del todo esta estructura

[Benderzuelo]

Hola compañeros,

por favor, me pueden explicar la siguiente estructura?

.dropdown-menu > li > a:hover > [class^="icon-"]

Yo entiendo que se refiere a todos los LI en estado hover que tengan la clase icon- lo que venga después se le aplique la norma, pero si es eso, los símbolos ">" sobrarían no?, tendría el mismo efecto?, la clase podría ser por ejemplo icon-algo ó icon-otra?

No entiendo la expresión del class del todo. :(

aquí tengo otras formas

.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large

unas llevan el *= otras llevan el ^=

A ver si me podeis ayudar gracias

Muchas gracias por adelantado¡¡

[pzin]

Iniciado por Benderzuelo

.dropdown-menu > li > a:hover > [class^="icon-"]

Yo entiendo que se refiere a todos los LI en estado hover que tengan la clase icon- lo que venga después se le aplique la norma, pero si es eso, los símbolos ">" sobrarían no?, tendría el mismo efecto?, la clase podría ser por ejemplo icon-algo ó icon-otra?

El selector > sirve para seleccionar hijos. Pueden haber elementos descendientes que no sean hijos. Así que si es lo mismo o no dependerá de cómo sea la estructura HTML.

Iniciado por Benderzuelo

aquí tengo otras formas

.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large

unas llevan el *= otras llevan el ^=

[atributo*=algo] sirve para seleccionar los elementos que tengan en alguna parte del valor de su atributo el valor algo.

[atributo^=algo] sirve para seleccionar los elementos que comiencen el valor de su atributo por el valor algo.

Luego hay otros:

[atributo$=algo] termina en algo.

[atributo~=algo] el valor algo está en una lista separada por espacios. Por ejemplo: "uno algo tres".

[atributo|=algo] el valor algo está en una lista separada por guiones. Por ejemplo: "uno-tres-algo".

[Benderzuelo]

Muchisimas gracias, me ha sido de gran ayuda