Styles not showing up in DevTools

My pseudo-class styles isn’t showing up in chrome DevTools style tab – also in Opera and Firefox.

input:focus ~ label, input:valid ~ label{
			top: -1em;
			font-size: 1em;

			/*font-size: 96%;*/

			color: #191717c4;
		}

The above and the pseudo- classes applied on the button element did not show up.
Could someone tell me why, please?
Take a look at the code: https://codepen.io/samolex/pen/eYJOVBJ

Chrome DevTools is showing you what styles are currently applied. You will need to trigger the element state required by the style if you want to see the style applied. I am not entirely sure why that is, but follow these directions to see it for yourself.

If you select your input element within the element tree like below.

Now you will select the toggle element state button under the styles tab, and select :focus.

Capture1

Now when you look at the label element’s styles you will see your pseudo selector applied.

Capture2

1 Like

Thank you very much!