2

Gostaria de saber se existe uma forma de selecionar um texto que está entre parênteses utilizando apenas CSS. Por exemplo.:

<p>Sistemas de informação (ead)</p>

Eu gostaria de selecionar o texto "ead" e colocar ele em letras maiúsculas. Existe uma forma de fazer isso utilizando APENAS CSS?

4
  • Acredito que isso não é possível, você vai precisar usar javascript.
    – Marconi
    26/03/2019 às 11:28
  • É o que eu imaginei a primeiro momento... mas resolvi compartilhar a dúvida com os especialistas aqui rs 26/03/2019 às 11:35
  • Por hora, acredito que não tenha como. Mas o CSS vem trazendo funcionalidades mais específicas para textos. Como, por exemplo, o seletor de letras: :nth-letter, o seletor de palavras: :nth-word, etc. Dá uma olhada aqui: (TL-DR) CSS-Tricks 2019 Wishlist
    – LipESprY
    26/03/2019 às 11:40
  • Obrigado pela recomendação. Vou dar uma lida. 26/03/2019 às 11:55

2 Respostas 2

1

Você pode utilizar o seguinte css:

.exemplo{
 text-transform: uppercase;
}
<p>Sistemas de informação <span class="exemplo">(ead)</span></p>

JsFiddle

3
  • Sim... mas nesse caso específico, eu não consigo printar as tags "span" pois o texto é escrito na tela de forma dinâmica(trazido de uma api). Gostaria de um seletor que fosse especificamente para selecionar textos entre parênteses. 26/03/2019 às 11:33
  • 1
    @LeandroCastro Se for viável, poste a parte onde é renderizado esse texto, tal como seu container, que dá pra fazer isso via JavaScript. Posso lhe oferecer uma resposta exemplificando, se lhe for útil! - Lembre-se de atualizar a pergunta, já que pede exclusivamente via CSS.
    – LipESprY
    26/03/2019 às 11:42
  • Agradeço a atenção. Mas com JS eu consigo fazer... Queria mesmo era descobrir se isso é possível com CSS... 26/03/2019 às 11:56
1

No momento ainda não é possível, pois ainda não temos um seletor de ::last-word, ou ::first-word. Nem nos drafts dos Seletores Level 4 existe menção a esse tipo de seletor como vc pode ver aqui: https://drafts.csswg.org/selectors-4/

Se vc quiser tentar algo com JS aqui tem o plugin que pode te interessar. http://letteringjs.com/

E aqui um exemplo com jQuery. Ele basicamente coloca a última palavra dentro de um span e seta a classe

$(".lastWord").html(function(){
  var text= $(this).text().trim().split(" ");
  var last = text.pop();
  return text.join(" ") + (text.length > 0 ? "(<span class='red'>" + last + "</span>)" : last);
});
.red {
  color: red;
  font-weight: bold;  
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="lastWord">jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</div>

Fonte do código https://codepen.io/mel/pen/jLEKH

2
  • Obrigado pela resposta. Mas eu gostaria de descobrir se é possível fazer isso utilizando apenas CSS... Com JS eu consigo fazer... Queria era matar essa curiosidade rs 26/03/2019 às 11:57
  • @LeandroCastro nesse caso infelizmente só com CSS não é possível. Com CSS vc consegue pegar a primeira letra ::first-letter ou a primeira linha ::first-line, mas não uma palavra, seja no início ou no final, e para piorar nem consta nada a respeito nos Drafts, então não espere por isso tão cedo... Se o texto fosse na mão vc poderia usar um simples ::after para incluir o texto. Mas como vc falou que o texto vem de uma API, acho que o ::after não daria certo... 26/03/2019 às 13:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .