CSS para cambiar el color de la última palabra en h1

Question

tengo un sitio web que estoy desarrollando utilizando CSS3 y tengo h1 etiqueta para el título:

<h1>main title</h1> 

Ahora quiero el título a ser de un color diferente:

<h1>main <span>title</span></h1> 

Así que hago:

h1 { 
color: #ddd; 
} 
h1 span { 
color: #333; 
} 

¿hay alguna manera no para usar la etiqueta span y solo especificar en CSS la última palabra para que sea de un color diferente?

Answer 1

Esto no es posible con CSS puro.Sin embargo, puede usar lettering.js para obtener un selector ::last-word. CSS-Tricks tiene un excelente artículo sobre esto: CSS-Tricks: A call for nth-everything. A continuación, puede hacer lo siguiente:

h1 { 
    color: #f00; 
} 

/* EDIT: Needs lettering.js. Please read the complete post, 
* before downvoting. Instead vote up. Thank you :) 
*/ 
h1::last-word { 
    color: #00f; 
} 

Answer 2

CSS funciona en elementos ... pero generalmente no en el texto o los datos dentro de un elemento. Sin embargo, podría usar Javascript, si lo desea, para trabajar con el texto real dentro de los elementos.

Answer 3

CSS realmente no interactúa con el texto de esa manera. interactúa con elementos en el árbol DOM. Agregar un lapso alrededor de esa palabra es la forma estándar (que he visto, al menos) de diferenciar una pieza de texto. Simplemente use la etiqueta span, el mantenedor del código se lo agradecerá.

Answer 4

No. No hay selector para palabras específicas, consulte Selectors Level 3: 2. Selectors.

Tienes que usar la etiqueta span o ejecutar JavaScript para convertir cada palabra en un lapso que contenga esa palabra.

Answer 5

No, no hay un selector en CSS que se refiera a la última (o primera) palabra de un elemento. Hay pseudoelementos para la primera letra y para la primera línea, pero las palabras deben estar envueltas en contenedores para poder diseñarlas por separado.

Answer 6

No, no lo hay. Solo ::first-letter y ::first-line existen en CSS. Cualquier otra cosa se debe hacer manualmente con un elemento (por ejemplo, span).

Nota: se han previsto Ni ::first-word ni ::last-word, al menos no en el Selectors level 4 spec.

Answer 7

CSS no tiene conocimiento de palabras. Lo único que existe es: primera letra y: primera línea. Un constructo como una palabra y un pseudo elemento para el último no existen.

Si realmente desea tener una solución dentro de un elemento, entonces debe usar javascript para analizar la última palabra. Creo que la forma en que se dirige es la mejor manera cuando solo tiene unos pocos casos en la página.

Si lo usa para h1, debería tenerlo más o menos una vez en la página.

Answer 8

Tal vez con "después de" selector de

element1 
{ 
    properties 
    main 
} 

element1:after 
{ 
    content: "title"; 
    color: pickone; 
} 

recomiendo estancia con "span". Si no quiere tener un enorme css con material extra que siempre se puede hacer esto en su html:

<span style="color:#000;">text</span> 

Answer 9

"última palabra" no funcionará en todos los navegadores; por ejemplo, no funciona con Safari. No usaría la respuesta aceptada. No creo que sea una buena idea importar una biblioteca o un complemento completo solo para cambiar la última palabra de un solo título, es como "matar un error con un cañón" ... En cambio, usaría una única función de Javascript, y una clase global. Algo como esto:

<h1>This is my awesome <span class="last-word">title</span></h1> 

CSS:

<style> 
    .last-word {font-weight:bold; /* Or whatever you want to do with this element */ } 
</style> 

Inicialmente, usted podría tener algo como esto:

<h1 class="title">This is my awesome title</h1> 

Entonces, se podría inicializar un método Javascript para cambiar la última palabra sobre $ (documento) .ready() =>

<script> 
    $(document).ready(function() { 
     $('.title').each(function(index, element) { 
      var heading = $(element); 
      var word_array, last_word, first_part; 

      word_array = heading.html().split(/\s+/); // split on spaces 
      last_word = word_array.pop();    // pop the last word 
      first_part = word_array.join(' ');  // rejoin the first words together 

      heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join('')); 
     }); 
    }); 
</script> 

Buena suerte.

Answer 10

Tomando la respuesta de iblue pero haciéndolo un poco más sensato.

Uso lettering.js con la siguiente configuración:

$(document).ready(function() { 
    $('h1').lettering('words'); 
}); 

que se repartirán a cabo cualquier etiqueta <h1> en algo así:

<h1> 
    <span class="word1">Highlight</span> 
    <span class="word2">the</span> 
    <span class="word3">last</span> 
    <span class="word4">word</span> 
    <span class="word5">a</span> 
    <span class="word6">different</span> 
    <span class="word7">color</span> 
</h1> 

Por supuesto no podemos apuntar .word7 como que no podría ser el último para que podamos usar la pseudo-clase CSS :last-child.

h1 { 
    color: #333; 
} 

h1 > span:last-child { 
    color: #c09; 
} 

Ahora la última palabra tiene un color diferente. Check out the live example.

único que hay que tener cuidado es support for :last-child