Question about style inside form elements

Question

I don't understand why selecting form will apply the active class to the label:

form :active {
  color: red;
}


form button {
  background: white;
}

    <form>
      <label for="my-button">My button: </label>
      <button id="my-button" type="button">Try Clicking Me or My Label!</button>
    </form>

The same exact question had been asked from another user about 60 min before. — Llazar, Oct 23 '18 at 18:50
note the *space* inside your selector .. :active is applying to the child element and not the form element — Temani Afif, Oct 23 '18 at 19:00
Yeah....If I do "form:active" it only applies to the label...Why? — , Oct 23 '18 at 19:06
in this case you will have inheritance and only label will inherit the value because button has already a default value specified — Temani Afif, Oct 23 '18 at 19:16

score 0 · Answer 1 · answered Oct 23 '18 at 18:51

0

"The :active selector is used to select and style the active link. A link becomes active when you click on it."

With this:

form:active {
  color: red;
}

you set the color of form and all the elements inside to red when active (when you click anywhere on your form)

answered Oct 23 '18 at 18:51

Iulius

628
4
13

Thank you. So if I assign a CSS selector to the parent, it will always, unless otherwise stated, affect the children? – Oct 23 '18 at 18:52
1

note the *space* in the selector of his code which is important – Temani Afif Oct 23 '18 at 18:59

Question about style inside form elements

1 Answers1