Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: css h1 color

  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

    css h1 color

    can i use only css to make the first word in a <h1> blue and the rest green, or do i have to use <span>s?

  • #2
    New Coder
    Join Date
    Jul 2006
    Location
    London
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Yes, span

    I have not come across pseudo for word ie. h1:first etc. so i guess you will have to use span.
    Hope this helps.

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    <html>
    <head>
    <style type="text/css">
    .first-word
    {
    color: blue;
    font-size:xx-large
    }
    h1
    {
    color: green;
    }
    </style>
    </head>
    
    <body>
    <h1>
    <span class="first-word">You</span> cannot use the :first-letter pseudo-element to add a special effect to the first word of a text!
    </h1>
    </body>
    
    </html>

    Nick!
    Last edited by ragol_67; 07-06-2006 at 04:02 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by croatiankid
    first word
    (emphasis added)

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh oops! Sorry, my bad. It's too early for me!


    *!Adjusts Code!*
    Last edited by ragol_67; 07-06-2006 at 04:01 PM.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Why not just use

    h1:first-word {color:blue;}

    or do you still have too many visitors using antique web browsers for that method (now several years old) to work.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by felgall
    Why not just use

    h1:first-word {color:blue;}

    or do you still have too many visitors using antique web browsers for that method (now several years old) to work.
    Antiquated like FF1.5/Mac, Safari, Camino and Opera 9/Mac (none of which appear to support that particular option)?

    Maybe I've developed some CSS standards blind-spots, but alleged support the :first-word pesudo element being several years old is a new one on me.
    I've not found anything beyond it's discussion as a potential inclusion for CSS3.

    Which super-new browser did you have in mind that supports it?
    Last edited by Bill Posters; 07-06-2006 at 10:25 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    felgall, I don't see :first-word mentioned in the latest working draft of the CSS3 Selectors module either.

    Here's a JavaScript solution to this problem: First Word Selector
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    I guess that the CSS books that came out several years ago that included it were getting a little ahead of themselves. I have never had a use for it but just assumed that since books several years old included it as one of the standard stylesheet options that current browsers supported it. I shal;l try not to make similar assumptions in the future.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •