Título en dos colores con css

[Salome]

Hola a tod@s

Resulta que tengo éste titulo en mis páginas

<h3>Titulo página</h3>

y quiero que desde los css ponga a "Título" de un color y a "página" de otro... algo como:

Titulo página

En el css sólo hago relación al h3

Código HTML:

div.module h3 {
     color: #f70a0a;
}

Alguien tiene idea de como hago para que desde los css ponga mi segunda palabra o las que sigan de otro color?

[Daniel Ulczyk]

Iniciado por Salome

Alguien tiene idea de como hago para que desde los css ponga mi segunda palabra o las que sigan de otro color?

Podés utilizar la etiqueta span en la segunda palabra

Código HTML:

<h3>Titulo <span>página</span></h3>
 

Y entonces declará el color necesario

[JavierB]

Hola Salome

Muevo tu tema al foro de CSS desde Competencias CSS.

Saludos,

[TheDark03]

Hola Salome,

investiga sobre el uso y aplicación de clases css

CSS:

Código CSS:

.color1{color:#fb0000;}
.color2{color:#eaeaea;}
 

y la estructura html quedari algo asi

Código HTML:

<h3 class="Color1">TITULO</h3>&nbsp;<h3 class="color2">PAGINA</h3>
 

Saludos DTB

[Salome]

Bueno, creo que me faltó claridad en el post...

Resulta que es un título que viene de base de datos, no tengo como dividirlo, o traerlo divido, tampoco quiero hacerlo desde el código, por esto pregunto si se puede desde el css, de alguna forma decirle que sólo la primer palabra sin que sea un span.

Ahora, no puedo poner un span desde el css pues una idea "loca"

[TheDark03]

Hola Salome (no se si lleva tilde o no así que ahí mejor lo dejo XD)...
con css que yo sepa no se puede ya que css solo significa Cascading Style Sheets...

pero lo que puedes hacer es encontrar el carácter con espacio vació dentro de tu cadena a devolver y así contar el numero de palabras , extraer palabras para luego concatenarlas y poder asignarles distintas clases a cada una...

Saludos DTB

[alexk]

otra alternativa seria usar un poco jquery si no puedes agregar desde el html el <span>

Código Javascript:

$(function(){
   
$("h2").html(function(i,text){
    return text.replace(/\w+\s/, function(match){
        return '<span class="otrocolor">' + match + '</span>';
    });
});
    
});
 

PD: si usaras jquery solo para hacer esto me parece una tonteria pero bueno de poder se puede ya que no hay un pseudo selector CSS para la primera palabra, (para la primera letra si)