5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

"::selection" not working for <br/>

by shipwrecked
4 replies
  • WEB DESIGN
    • |
Hi,

I am trying to set a custom color for selected text, DIV, etc.

This did not work for everything, so I used custom for each element...
Code:
::selection { /* Safari */ background: #2AC7F4; color:#FFFFFF;}
::-moz-selection { /* Firefox */ background: #2AC7F4; color:#FFFFFF;}
Custom setting for link looks like this:
Code:
a::selection { /* Safari */ background: #2AC7F4; color:#FFFFFF;}
a::-moz-selection { /* Firefox */ background: #2AC7F4; color:#FFFFFF;}
...for text looks like this:
Code:
p::selection { /* Safari */ background: #2AC7F4; color:#FFFFFF;}
p::-moz-selection { /* Firefox */ background: #FCCB72; color:#FFFFFF;}
...and so on for DIV, H1, H2 etc.

But I can't get the seletion color to work for the <br/> spaces...
I tried setting
Code:
br::selection
, but it doesn't work. What's the code for <br/>? :confused:

If I have <br/><br/><br/> (thick space between lines), it doesn't appear in my colour, but uses the standard "browser blue"...

I can only solve this by adding: <p><br/><br/><br/></p>, which is absurd, because I'd have to add additional code on every page only to get the space colored...

Thanks in advance...
#&ltbr or &gt #<br or > #selection #working
  • Profile picture of the author KirkMcD
    Originally Posted by shipwrecked View Post

    But I can't get the seletion color to work for the <br/> spaces...
    I tried setting
    Code:
    br::selection
    , but it doesn't work. What's the code for <br/>? :confused:
    There isn't one.
    Read html - Can you target <br /> with css? - Stack Overflow
    {{ DiscussionBoard.errors[8285210].message }}
    • Profile picture of the author RobinInTexas
      Try using margin or padding instead of <br />
      Signature

      Robin



      ...Even if you're on the right track, you'll get run over if you just set there.
      {{ DiscussionBoard.errors[8285485].message }}
    • Profile picture of the author Brandon Tanner
      The more important question is, why are you using line breaks for layout purposes? When you do that, the amount of spacing is going to vary from browser to browser (especially when you use multiple <br />'s in a row).

      You should use margin instead. That way your layout will be "pixel perfect" from browser to browser.

      CSS Tutorial - Margin
      Signature

      {{ DiscussionBoard.errors[8285490].message }}
  • Profile picture of the author shipwrecked
    Well, I have the text settings applied to the DIV, not the <p>, so I reckoned I am going to use <br/> for line breaks, new "blank" lines/spaces between rows.

    If I'd set the margin to the DIV, it would distort the design...
    Otherwise I'd have to set a <p class=...> so that I an set the margin to that class... not sure, will experiment and will try.

    With line break <br/> there is more work, but also more control. Sometimes I need more line breaks, but sometimes I need two lines stuck together etc. So this is another reason why I intentionally use it.

    The <br/> is only used within the main text. Otherwise I can use <span> for other functions.
    And <br/> line breaks and spaces between rows of text look great in all browsers.

    But I'm still clueless on how to solve the color SELECTION problem...
    {{ DiscussionBoard.errors[8286011].message }}

Trending Topics