Home/ Questions/Q 6721313
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T09:18:53+00:00

I’ve got the following html/css which is intended to change a sibling element to

  • 0

I’ve got the following html/css which is intended to change a sibling element to red if the input element before it has a class of “invalid”, My question is what would explain this sibling selector behavior when the first element is an input field?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style tyle="text/css">
    div.required_text
    {
      color:#008000;
      display:inline;
    }
    input.invalid + div.required_text
    {
      color:#800000;
    }
    </style>
  </head>
  <body>
    <p><input type="text" class=""><div class="required_text">Required</div></p>
    <p><input type="text" class=""><div class="required_text">Required</div></p>
    <p><input type="text" class="invalid"><div class="required_text">Required</div></p>
  </body>
</html

If I change my HTML to use a div, this slector is fine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style tyle="text/css">
    div.required_text
    {
      color:#008000;
      display:inline;
    }
    div.invalid + div.required_text
    {
      color:#800000;
    }
    </style>
  </head>
  <body>
    <p><div class="">[mock form element]</div><div class="required_text">Required</div></p>
    <p><div class="">[mock form element]</div><div class="required_text">Required</div></p>
    <p><div class="invalid">[mock form element]</div><div class="required_text">Required</div></p>
  </body>
</html>

EDIT: Ok so it seems there are extra paragraph tags being added to the rendered output when each line is wrapped with paragraph tags which is breaking the sibling selection, what causes this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try this markup instead 

    <div><input type="text" class=""><span class="required_text">Required</span></div>

    You should not put block elements into inline elements.

    from the DTD 

    <!ELEMENT P - O (%inline;)*            -- paragraph -->

    says that paragraphs can only contain 0 or more inline elements

    • 0