1

I'm trying to style the first word of a specific sentence using only CSS (i.e. I can't change the HTML). I feel that I'm close to the answer but I can't seem to get it right. The CSS selector I'm using is:

main > h2:nth-child(2)+p {
  color: red;
}

I can't post the HTML here cause it's not getting formatted right, but it can be found on this JSFiddle: https://jsfiddle.net/gk0bwtvs/20/

Thanks,

brld

Again: I cannot change the HTMl, or add any sort of Javascript.

brld
  • 188
  • 2
  • 16
  • You can't select the first word with CSS . Exactly which word of the entire HTML ? can't you enclose it in a span element ? or add it with css? – DaniP Sep 21 '16 at 20:50
  • http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word – ak85 Sep 21 '16 at 20:51
  • I know for a fact it's possible, @DaniP, because this is part of an exercise where the guidelines are *Do not change the HTML*. Any ideas? – brld Sep 21 '16 at 20:54
  • @brld do the guidelines say you can use JavaScript? – Goose Sep 21 '16 at 20:56
  • Use a pseudo-element to insert the first word or use Js to isolate the word and style it – DaniP Sep 21 '16 at 20:58
  • No, I cannot use any Javascript. – brld Sep 21 '16 at 21:20

1 Answers1

3

You'll need to either change the HTML to place the first word in a span that you can select CSS, or you need to use JavaScript to detect the first word, then use JavaScript to place that word ina span that you can select with CSS.

There is only one way to accomplish this. Create your own browser application, and add support for a :first-word pseudo-element selector.

Goose
  • 4,764
  • 5
  • 45
  • 84
  • Down-voted from principles for the unfortunate expression `This is impossible to do`. This is web, Goose. It's virtual space. Everything is possible, unlike in actual space. – tao Sep 21 '16 at 20:51
  • @AndreiGheorghiu, but Goose is correct (or at least until ::first-word pseudo-element is created) – The One and Only ChemistryBlob Sep 21 '16 at 20:54
  • 1
    @AndreiGheorghiu Note that within the bounds of CSS3, this is in fact impossible. Saying "you can't do that" is a perfectly valid answer if there's clear evidence that you can't. – Serlite Sep 21 '16 at 20:55
  • @AndreiGheorghiu Everything is possible in computing, absolutely, but everything is not possible in a browser, unless you control the browser. I have updated my question in a way that better reflects this. – Goose Sep 21 '16 at 20:55
  • I removed the downvote, as Goose removed the offending (for me) wording. Out of principles, "this is not possible" does not go well with web-development. It's how I think and act about the web. I hope nobody is upset :). Thank you, Goose. – tao Sep 21 '16 at 21:03
  • @AndreiGheorghiu In computing in programming, I find it's absolutely true that anything is possible. Web Development however, is a world of browser and network and language restrictions. Anything is still possible, until you start saying "and you can't do it this way". For instance, humans can fly, but when you say "without balloons or planes or helicopters or wings or fuel or etc", eventually it does become impossible. – Goose Sep 21 '16 at 21:09
  • 1
    You're absolutely right, Goose, and I know this all too well. In fact, I hesitated before acting upon my impulse. What made me decide I should act and tell you why, was because you declared this impossibility in a separate sentence, without any amendments. If you would have said "it's not possible within the bounds of CSS3/with CSS alone" I wouldn't have had any problem with it. Cheers! – tao Sep 21 '16 at 21:14