Pick up CSS Specific Element with Sign +

Asked

Viewed 499 times

4

My question relates to this question:

What the + sign in CSS means?

I’m using the + sign to do an effect on a form I have.

It works, but the point is that my form has validation. That is, when I click the button to submit the form information a label.error, with the error message.

Hence the effect on the field is lost because the ul.opcoes is no longer the next field when appears the label.error.

.select-area-field:focus + ul.opcoes{
    visibility: visible;
}

So my question is:

  • How to make CSS find a specific element in the tree by following these rules ?

HTML

<div class="inline select-area">
    <input type="text" name="area" placeholder="Área Desejada" readonly="readonly" class="select-area-field"/>

    <!-- A Label aparece bem aqui -->

    <ul class="opcoes">
        @foreach($area as $item)
            <li data-id="{!! $item->id !!}">{!! $item->area !!}</li>
        @endforeach
    </ul>
    <input type="hidden" name="cod-area" id="cod-area" />
</div>

With jQuery if it used to do so:

$(document).find('div.wrapper');

html css

  • I actually have control over the position of label.error. I can throw everything into a container. I just did that and it worked. But what I asked is already possible with CSS ?

  • I don’t know if that’s the best title for that question. : thinking:

  • The title is really bad, when reading the title I thought you wanted a CSS selector for this: <span>+</span> (an element with the contents of a "+"). Hehe. I’m not sure how to improve, but the "+" command in the CSS selector is given this technical name: Adjacent sibling selectors, Maybe this can help you. = D

1 answer

2


What you can do and consider the most usual and correct in this case where there may be an element between them or not, and in your case where you know and have control over the element (label.error).

Is to add the CSS rule to the possibility of whether or not there is the element label.error amid .select-area-field:focus and ul.opcoes, applying the CSS style to both cases, the implementation could be something similar to this:

ul.opcoes {
  visibility: hidden;
}
label.error {
  color: red;
}

/* aqui está o segredo da solução */
.select-area-field:focus + ul.opcoes,
.select-area-field:focus + label.error + ul.opcoes {
  visibility: visible;
}
<div class="inline select-area">
  <input type="text" name="area" placeholder="Sem label error" readonly="readonly" class="select-area-field" />

  <!-- A Label aparece bem aqui -->

  <ul class="opcoes">
    <li>Opção 1</li>
    <li>Opção 2</li>
    <li>Opção 3</li>
  </ul>
  <input type="hidden" name="cod-area" />
</div>

<div class="inline select-area">
  <input type="text" name="area" placeholder="Com label error" readonly="readonly" class="select-area-field" />

  <!-- A Label aparece bem aqui -->
  <label class="error">label.error</label>

  <ul class="opcoes">
    <li>Opção 1</li>
    <li>Opção 2</li>
    <li>Opção 3</li>
  </ul>
  <input type="hidden" name="cod-area" />
</div>

Example also available in jsFiddle.

  • Killed at stake, Vélho. I didn’t even think about it. Thank you.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.