Use pseudo classes for selecting webkit pseudo elements

css, css-selectors, google-chrome, pseudo-element, shadow-dom

Solution

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">

Problem

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.

Original source