Get Specific CSS Element with +

Question

Get Specific CSS Element with +

Navigation

#1 by (2 votes)

4

My question is related to this question:

I'm using the + sign to make an effect on a form that I have.

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

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

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

So my question is:

How to make CSS find a specific element in the tree 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>

jQuery is usually done like this:

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

html css

asked by anonymous 23.10.2015 / 19:29

1 answer

How to associate / open mp3 files in raw folder? DIV Alignment

score 2 · Accepted Answer

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 ).

It is to add the CSS rule to the possibility of having the label.error element between .select-area-field:focus and ul.opcoes , applying the CSS style to both cases, the implementation could be something like 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 available also in jsFiddle.