Use pseudo classes for selecting webkit pseudo elements

Question

Not sure if the title is really clear.

What I try to do is to select a webkit pseudo element (inside shadow dom) with a :nth-of-type pseudo class.

So I want to select the second -webkit-datetime-edit-text pseudo element in an input.

I thought that I could do it like this:

::-webkit-datetime-edit-text:nth-of-type(2){
  display: none;
}

But this doesn't work.

Is there a way to do this?

Help would be greatly appreciated.

ps: For those who aren't aware of the possibility to inspect the shadow dom see here point nr 12.

@MRLister this is the shadow dom content of a default html input type time — Getter Jetter, May 08 '17 at 11:16
It would really help us if you pasted your actual html rather than a picture of it — Pete, May 08 '17 at 11:17
A [better fiddle](https://fiddle.jshell.net/0zh6aaj5/1/) to show the ones that don't know chrome shadow styling that it works when directly accessing shadow elements, by their `pseudo` attribute. Of course to be run in chrome, with the *Show user agent shadow DOM* option triggered in the dev-tools. cc @MrLister — Kaiido, May 08 '17 at 11:26
@MrLister http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/ see visualize shadow dom — Getter Jetter, May 08 '17 at 11:28
@NikhilNanjappa just tried your solution, doesn't work either — Getter Jetter, May 08 '17 at 11:50
@OlivierKrull - Yes just figured, it would not because what you are trying to edit is the browser generated shadow DOM and cannot be altered. You can use any of the methods shown ONLY if you create a shadow DOM using `createShadowRoot()` (javascript method) i believe. Always remember the shadow root must say `#shadow-root (open)` and NOT `#shadow-root (user-agent)` — Nikhil Nanjappa, May 08 '17 at 12:01
@Nikhil Nanjappa: Why'd you suggest `#host::shadow div:nth-of-type(2)[pseudo="-webkit-datetime-edit-text"]` then, if you know that the UA default shadow trees cannot be altered? — BoltClock, May 08 '17 at 12:02
@BoltClock - I researched a lot myself now and figured out the issue ... already deleted that one — Nikhil Nanjappa, May 08 '17 at 12:03

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

It's complete hack time !!!

_{For a real solution, pass your way. But anyway playing with vendor-specific pseudo-element means you're open to hacks, aren't you ?}

There unfortunately doesn't seem to be any way to combine pseudo-selectors on pseudo-elements. But while trying out some things and others, I ended up with this awful hack :

The element before this second : can be targeted. So we can place on top of the real target, with an white background, and pretend that this : doesn't exist.

input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
}
input::-webkit-datetime-edit-text {
    position: relative;
    z-index: 0;
    padding-right: 4px;
}
input::-webkit-datetime-edit-minute-field {
    background: white;
    z-index: 4;
    display: inline-block;
    width: 10px;
    height: 12px;
    position: absolute;
    top: 0;
    margin-left: -4px;
}

<input type=time step="1" value="00:00:00">

Use pseudo classes for selecting webkit pseudo elements

1 Answers1

It's complete hack time !!!

Linked