Home/ Questions/Q 8117809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:17:48+00:00

I have a div class named switch control which has a div class named

  • 0

I have a div class named switch control which has a div class named thumb as child

<div class="switch-control">
         <div class="thumb"></div>
</div>

and there are css for them called:

.switch-control > .thumb
.switch-control > .thumb::before

Both css classes are taking affect and used on chrome and firefox, but on IE8,9 the .switch-control > .thumb is active and the .switch-control > .thumb::before is marked out and not used thus I can’t see it taking affect on IE8,9

Why is that and how can I fix it ?
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE9 has a tendency to cross out styles for pseudo-elements for some weird reason, but it does support the CSS3 double-colon notation for all supported pseudo-elements (this includes CSS1 ::first-line and ::first-letter, and CSS2 ::before and ::after). If your styles aren’t working, something else is wrong (there are a number of SO questions to this effect but I have no clue what could be causing the problem).

    IE8 does not support the CSS3 double-colon notation for any pseudo-elements, only the single-colon notation that has always traditionally been in use.

    If you need to support IE8, you have to use the traditional single-colon notation (which every browser is expected to continue supporting for compatibility reasons):

    .switch-control > .thumb:before

    And regarding your comment:

    I have updated my css style sheet from .switch-control > .thumb::before to .switch-control > .thumb:before (from double colon to single colon) but all browsers (chrome and IE) still shows double colon. how come?

    As I mentioned, pseudo-elements are now supposed to be prefixed with double colons, with single colons maintained for compatibility. It’s simply the new notation that should be used starting from CSS3 selectors and going forward, so when a browser’s developer tools encounter a pseudo-element rather than a pseudo-class, it displays it with double colons if it understands CSS3.

    In other words, it’s just the browser UI showing it with double colons. It’s not altering the code in your stylesheet in any way.

    • 0