css selector with nth and not [closed]

Question

css selector with nth and not [closed]

Navigation

#1 by (2 votes)

1

I have a form with flexbox , only when an error is entered a div of alert , breaking layout .

There are some fields that are 50% on the same line

<form method="post" action="XXX" class="form-login">
    @if($message = session('message'))
        <div class="alert-error">
            {{ $message }}
        </div>
    @endif

    <div class="form-group">
        <label for="">E-mail</label>
        <input type="email" name="xxx" value="{{ old('xxx') }}">
    </div>

    <div class="form-group">
        <label for="">Senha</label>
        <input type="password" name="xxx" value="{{ old('xxx') }}">
    </div>

    <button class="btn btn-logar">
        Logar
    </button>
</form>

And in css I have

 .form-login.form-group:nth-of-type(1),
 .form-login.form-group:nth-of-type(2) {
     width: 48.3%;
     flex: 1 0 auto;
 }

This happens because I am using nth-of-type , what would be workaround ?

css css3 bootstrap

asked by anonymous 25.08.2017 / 18:10

1 answer

Group objects and add values Number formatting is not working

score 2 · Accepted Answer

A simpler solution, not to use nth-of-type, is to use the form-group classes you already have in the field groups. So your CSS would look like this:

.form-login .form-group {
    width: 48.3%;
    flex: 1 0 auto;
}

If you want to use nth, it could be done like this:

.form-login .form-group:nth-of-type(n+1) {
    width: 48.3%;
    flex: 1 0 auto;
}