3

I have a peace of css styled like this:

ol li:before {
   content: counter(item) ". ";
   counter-increment: item;
   background: #afafaf;
   user-select: none;
}

Now, user-select: none; prevents selection, but if one selects the list, content of :before marks as selected. I would like to prevent that by setting background-color: transparent. But where? ol li:before::selection won't work.

Picture related:

enter image description here

Lorem ipsum text is selected (painted red), I'd like the list selection to appear transparent.

nenadg
  • 420
  • 11
  • 16
  • Your question is unclear as it stands. – Praveen Kumar Purushothaman Mar 10 '16 at 10:00
  • 1
    I coded CSS for 5 years and must admit this is the first time I saw `user-select` property, can you explain what you want? – Raphaël VO Mar 10 '16 at 10:02
  • @ThoVo As for `user-select`, https://developer.mozilla.org/en-US/docs/Web/CSS/user-select it's non-standard feature that prevents text to be selected (copied, etc.). More about it here: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – nenadg Mar 10 '16 at 10:07
  • @nenadg: I just read it few minutes ago, as it is non-standard, I recommend you shouln't use it, instead use js to deal with your problem, it will be more consistent between cross-browsers, add a handler for a `click` event in your `li` element and change or toggle the class for the background you want – Raphaël VO Mar 10 '16 at 10:11
  • @nenadg Could you please post your HTML code, thanks! – Peter Wilson Mar 10 '16 at 10:11
  • 1
    Please note, that ::selection needs the double colon :: not single : However, it doesn't seem to obey selection of pseudo elements (as it is itself a pseudo element (https://css-tricks.com/almanac/selectors/s/selection/) – Paul Thomas Mar 10 '16 at 10:12
  • @PeterWilson It's a plain ordered list, nothing special `
    1. Blah blah
    `, only thing 'special' is :before pseudo element.     – nenadg Mar 10 '16 at 10:15
  • @PaulThomasGC Of course. It seems that ::selection works fine only for 'normal' elements... – nenadg Mar 10 '16 at 10:19
  • 2
    @Paul Thomas GC: That ::selection itself is a pseudo-element is irrelevant. Pseudo-elements can be nested within pseudo-elements, for instance an element with a ::before can have a ::first-letter in its ::before. The selection rules around generated content are very hazy and that is the real reason why ::selection doesn't work reliably on generated content. – BoltClock Mar 10 '16 at 10:24
  • @nenadg stackoverflow is not coding service you have to provide a clean and complete example for your question , to answer you question I have to write the HTML code to try it which is should provided by you I recommend to read [ask] – Peter Wilson Mar 10 '16 at 10:27
  • @PeterWilson Thanks for critique, but the question is so plain and basic that I've considered providing full example would be completely unnecessary. – nenadg Mar 10 '16 at 10:31
  • 2
    @Peter Wilson: Normally, we do recommend that askers provide a complete working example, but this is not even a complicated example. It's literally just an
      with a series of
    1. s (and the CSS alone is enough to convey that). It doesn't take more than 30 seconds to write by hand in an answer (or a minute if you need to insert filler content). If you're not going to put half the effort that the OP did into answering the question then don't answer. Don't go telling people off saying "stackoverflow is not coding service", especially when they're not outright treating the site as such.
     – BoltClock Mar 10 '16 at 10:31
  • 1
    Thanks for clearification, I just wanted your question to get anwer faster! :) – Peter Wilson Mar 10 '16 at 10:36

1 Answers1

3

If I use all the browser prefixes then it appears to work for me.

enter image description here

ol li:before {
   content: counter(item) ". ";
   counter-increment: item;
   background: #afafaf;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

Here's an example fiddle: https://jsfiddle.net/0ft1z21L/1

Jivings
  • 22,834
  • 6
  • 60
  • 101