'Advanced css form selectors [closed]

Hello guys I have this CSS selector and I can't figure out how to read it. Can someone explain? Thanks

.form__input:not(:placeholder-shown).form__input:not(:focus)+.form__label {


Solution 1:[1]

The ideal is that in nested css classes you put them one below the other for easy reading, since it can contain many elements and about your question

.form__input:not(:placeholder-shown) 
// apply the class to all .form__input that do not have the selector "placeholder-shown".
.form__input:not(:focus) // applies the css to all .form__input not in "focus".
+.form__label // here applies the css to the input label
{

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DANNGZSHOT