-5

there I have the following element:

<h1> Welcome in our flat. </h1>

And I would like to modify it with CSS so that what it gonna be displayed will be:

Welcome to OUR flat.

So, I wanna capitalize the word OUR. Does anyone know how I can do that?

ffblord
  • 403
  • 3
  • 7
  • 14
  • 2
    You can't target a specific word with CSS, unless it is wrapped in an element of its own. – Asons Feb 22 '19 at 16:42

3 Answers3

4

It seems unnecessary to use CSS for this when changing it by hand would work just as well, but if you really want to use CSS, something like this would do it:

<p> Welcome to <span class="upcase">our</span> flat. </p>

.upcase {
    text-transform: uppercase;
}
Asons
  • 84,923
  • 12
  • 110
  • 165
Joshua Vega
  • 598
  • 1
  • 8
  • 22
3

Just capitalize the word. No need for CSS

<h1> Welcome to OUR flat. </h1>
Russ J
  • 828
  • 5
  • 12
  • 24
  • 1
    Do you really believe that they would ask at all, if that was the only problem...? – Asons Feb 22 '19 at 16:44
  • 2
    @LGSon If OP does not include such constraints in the question, then it's a reasonable assumption. – TylerH Feb 22 '19 at 16:45
  • @TylerH You must be kidding... a user that doesn't understand to simply capitalize a word. And then an answer saying jst that gets 4 upvotes....where are we going here with this? – Asons Feb 22 '19 at 16:45
  • 1
    In my opinion, trouble begins when we make assumptions about questions that aren't backed up with facts. In this case, we don't have any more information than what has been provided. There are all levels of programmers on this site, and I think it's in the greater interest to only focus on the question and information that we have. – Russ J Feb 22 '19 at 16:47
  • 1
    @LGSon Well there's also the concern that you posted a valid answer as a comment (which is something that the site recommends against). That solution also has 4 upvotes for the person who did bother to post it. If OP has additional constraints, they need to say so, and it's fine if they say so after this answer is posted "sorry, I forgot to mention I can't change the markup". Then Russ can edit or delete his answer, or suffer any potentially ensuing downvotes for being 'wrong' after OP provides clarification. – TylerH Feb 22 '19 at 16:49
  • 1
    Then how could the OP understand how to capitalize the "W" in the fist word. I find answers to questions like that completely waist. Nothing to do with coding what so ever. – Asons Feb 22 '19 at 16:50
  • @TylerH I know that, but I do it when I know there is a dupe, which I was about to look for when I got caught up with this answer for a sec. Found the dupe and closed the question. – Asons Feb 22 '19 at 16:54
  • @TylerH I just find horrible/unbelievable when users that post fantastic answers that took them an hour to create gets 1 upvote, an answers like this gets 4. – Asons Feb 22 '19 at 17:03
  • Perhaps this is simply a case of Occam's razor? – Russ J Feb 22 '19 at 17:08
  • @LGSon That's a valid concern, and I agree with the lamentation that high quality content sometimes gets upvoted less than low quality content, but that seems totally unrelated to your concern here of the answerer not making an assumption about OP's question that you think ought to be a required assumption. – TylerH Feb 22 '19 at 17:09
-1

Without changing the markup (like putting a span around the word "our"), you'll need to use javascript. If you can change the markup, just change it to your desired capitalization.

Here's one way to do it with javascript. Without knowing more about your environment and requirements (like how do you know the word "our" is the one you want to change), I can't say if this is the best solution, but maybe it will get you started.

const h1 = document.querySelectorAll('h1')[0];
h1.innerText = h1.innerText.replace('our','OUR');
<h1> Welcome in our flat. </h1>
nvioli
  • 4,137
  • 3
  • 22
  • 38
  • In my opinion, and baed on the current information in the question, this is overkill for what just boils down to simply capitalizing the actual text. – Russ J Feb 22 '19 at 16:44
  • 1
    I agree, but there are situations where you can't work with the markup directly. Just putting this out there in case that's the subtext behind the question. – nvioli Feb 22 '19 at 16:44
  • 1
    I also included that point in my answer: "If you can change the markup, just change it to your desired capitalization." – nvioli Feb 22 '19 at 16:45