Diseñadores web y demases, duda sobre CSS

Si tengo un párrafo con id "parrafo" y un subpárrafo suyo con clase "subparrafo", ¿cómo lo hago para cambiar el color del subpárrafo?

He probado con p#parrafo > p.subparrafo {color:

pero nop.

Edit: Es necesario que se mantenga la relación de herencia, de modo que sólo los hijos del párrafo parrafo que se llamen subparrafo tomen los estilos.
Hasta donde yo sé en HTML se considera ilegal anidar párrafos, lo ideal sería buscar una altenativa bien seá mediante divs o tablas. No obstante es posible que exista algún truquiillo para hacer lo que quieres, lo dificil será hacerlo funcionar en todos los navegadores/dispositivos.
ramulator escribió:Si tengo un párrafo con id "parrafo" y un subpárrafo suyo con clase "subparrafo", ¿cómo lo hago para cambiar el color del subpárrafo?

He probado con p#parrafo > p.subparrafo {color:

pero nop.


Debería funcionar así, algo está fallando sin que te des cuenta.

Una vez me volví loca porque el servidor no encontraba el archivo donde tenía todo el css, horas revisando código para acabar dándome cuenta que me confundí con una mayúscula. Generalmente los fallos que cometemos son tonterías que pasamos por alto.

¿El color esta bien puesto? ¿has cerrado bien la declaración con punto y coma? ¿no has fallado tecleando aunque sea una letra?

Prueba inspeccionando la consola de la web aunque sea en modo local, normalmente te señala donde está el problema y más en este tipo de fallos que no son tan complejos.
Lo primero lo mejor es no anidar párrafos uno dentro de otro.
Utiliza un div si quieres.
Lo segundo, con poner .subparrafo ya funciona.
Lo tercero no utilices Chrome para hacer estas cosas porque la caché es una mierda, es mejor Firefox.
seaman escribió:Lo primero lo mejor es no anidar párrafos uno dentro de otro.
Utiliza un div si quieres.
Lo segundo, con poner .subparrafo ya funciona.
Lo tercero no utilices Chrome para hacer estas cosas porque la caché es una mierda, es mejor Firefox.


Si pongo solo .subparrafo funciona, pero si quiero especificar que ese tiene que ser hijo del otro (como lo he puesto al principio) nada :S

Estoy utilizando Firefox

A ver si damos con el problema u.u
ramulator escribió:
seaman escribió:Lo primero lo mejor es no anidar párrafos uno dentro de otro.
Utiliza un div si quieres.
Lo segundo, con poner .subparrafo ya funciona.
Lo tercero no utilices Chrome para hacer estas cosas porque la caché es una mierda, es mejor Firefox.


Si pongo solo .subparrafo funciona, pero si quiero especificar que ese tiene que ser hijo del otro (como lo he puesto al principio) nada :S

Estoy utilizando Firefox

A ver si damos con el problema u.u


prueba directamente a poner #parrafo > .subparrafo { ... }
¿Y poniendo #parrafo .subparrafo?
¿Que te dice la consola de firefox? (Con la página cargada: Botón contrario, inspeccionar elemento, y vas a la pestaña consola)
nERon93 escribió:¿Que te dice la consola de firefox? (Con la página cargada: Botón contrario, inspeccionar elemento, y vas a la pestaña consola)


Nada, no está siendo sobreescrito ni nada de eso.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Formularios y Campos</title>
</head>

<body>
    <p id="parrafo">
        Este es mi parrafo de prueba
        <p class="subparrafo">
            Y este mi subparrafo de prueba
        </p>

    </p>

</body>

</html>


Y el mystyle.css
.subparrafo {
    color: green;
}

#parrafo {
    color: red;
}


Y funciona perfectamente
jorcoval escribió:...

Y funciona perfectamente


El tema es que así no se establece la relación de exclusividad para los hijos del párrafo :-?
ramulator escribió:
jorcoval escribió:...

Y funciona perfectamente


El tema es que así no se establece la relación de exclusividad para los hijos del párrafo :-?

Ah, vale, es que lo he hecho con sólo lo que decías en el primer post
Buscando por internet he llegado hasta la misma conclusión que decía @liborcito

liborcito escribió:Hasta donde yo sé en HTML se considera ilegal anidar párrafos, lo ideal sería buscar una altenativa bien seá mediante divs o tablas. No obstante es posible que exista algún truquiillo para hacer lo que quieres, lo dificil será hacerlo funcionar en todos los navegadores/dispositivos.


Osea que te toca o convertir el #parrafo en div y el .subparrafo en p, o si no, tendrás que olvidarte de colorear ese p, pero vamos existiendo el div olvídate de los p

EDITO: Además si usas inspeccionar elemento verás que están ambos <p> continuos y no anidados
jorcoval escribió:Ah, vale, es que lo he hecho con sólo lo que decías en el primer post


Ay coño, disculpa, no me he explicado bien [+risas]
Plage escribió:Buscando por internet he llegado hasta la misma conclusión que decía @liborcito

liborcito escribió:Hasta donde yo sé en HTML se considera ilegal anidar párrafos, lo ideal sería buscar una altenativa bien seá mediante divs o tablas. No obstante es posible que exista algún truquiillo para hacer lo que quieres, lo dificil será hacerlo funcionar en todos los navegadores/dispositivos.


Osea que te toca o convertir el #parrafo en div y el .subparrafo en p, o si no, tendrás que olvidarte de colorear ese p, pero vamos existiendo el div olvídate de los p

EDITO: Además si usas inspeccionar elemento verás que están ambos <p> continuos y no anidados

Sí, eso parece. Acabo de probar y con <p> no hay hijos, pero con <div> sí que he podido hacer párrafo, subpárrafo y modificar sólo el subpárrafo deseado a partir del padre

(pero vamos, yo uso html muy muy residualmente)
Plage escribió:Buscando por internet he llegado hasta la misma conclusión que decía @liborcito

liborcito escribió:Hasta donde yo sé en HTML se considera ilegal anidar párrafos, lo ideal sería buscar una altenativa bien seá mediante divs o tablas. No obstante es posible que exista algún truquiillo para hacer lo que quieres, lo dificil será hacerlo funcionar en todos los navegadores/dispositivos.


Osea que te toca o convertir el #parrafo en div y el .subparrafo en p, o si no, tendrás que olvidarte de colorear ese p, pero vamos existiendo el div olvídate de los p

EDITO: Además si usas inspeccionar elemento verás que están ambos <p> continuos y no anidados


Visto que con div funciona perfectamente, asumo que este es el motivo de que sea aparentemente irrealizable.

Muchísimas gracias a todos!
Claro, es que no sé porque incluyes un p dentro de otro p.

Como te han comentado, engloba todo dentro de un div, y dentro p. Y olvídate de tablas. XD
para resaltar algo dentro de un párrafo yo tenia entendido que era con span... y ya le metes el estilo que quieras al span
sadistics escribió:para resaltar algo dentro de un párrafo yo tenia entendido que era con span... y ya le metes el estilo que quieras al span


Span es el horroooooor jajaja.
20 respuestas