Select text in parentheses (CSS)

Asked

Viewed 241 times

2

I wonder if there is a way to select a text that is in parentheses using CSS only. For example.:

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

I would like to select the text "ead" and put it in capital letters. There is a way to do this using CSS ONLY?

html css front-end css-selectors

  • I believe this is not possible, you will need to use javascript.

  • It’s what I imagined at first... but I decided to share the doubt with the experts here rs

  • For now, I don’t think you can. But CSS has been bringing more specific features to texts. Like, for example, the letter picker: :nth-letter, the word selector: :nth-word, etc. Take a look here: (TL-DR) CSS-Tricks 2019 Wishlist

  • Thanks for the recommendation. I’ll give a read.

2 answers

1

You can use the following css:

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

Jsfiddle

  • Yes... but in this specific case, I can’t print the "span" tags because the text is written on the screen dynamically (brought from an api). I would like a selector that is specifically for selecting texts in parentheses.

  • 1

    @Leandrocastro If feasible, post the part where this text is rendered, such as your container, that you can do this via Javascript. I can give you an example answer if it’s helpful! - Remember to update the question, since you ask exclusively via CSS.

  • I appreciate the attention. But with JS I can do it... I really wanted to find out if this is possible with CSS...

1

At the moment it is not possible, as we do not have a selector ::last-word, or ::first-word. Even in the Level 4 Selector Drafts there is no mention of this type of selector as you can see here: https://drafts.csswg.org/selectors-4/

If you want to try something with JS here is the plugin that might interest you. http://letteringjs.com/

And here’s an example with jQuery. It basically puts the last word inside a span and arrow the class

$(".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>

Source of the code https://codepen.io/mel/pen/jLEKH

  • Thanks for the answer. But I would like to find out if it is possible to do this using only CSS... With JS I can do... I wanted to kill this curiosity

  • @Leandrocastro in this case unfortunately only with CSS is not possible. With CSS you can get the first letter ::first-letter or the first line ::first-line, but not a word, either at the beginning or at the end, and to make matters worse, there’s nothing about it in Drafts, so don’t wait for it so soon... If the text were in hand you could use a simple ::after to include the text. But since you said the text comes from an API, I think ::after wouldn’t work...

Browser other questions tagged html css front-end css-selectors

You are not signed in. Login or sign up in order to post.