Good I am practicing creating a form with bootstrap.
body{
background-color: #74DBEF;
}
#contentPrincipal {
background-color: #F6F5F5;
margin-top: 30px;
border-radius: 20px;
}
label {
font-weight: bold;
color: #048998;
}
.columnaIzquierda div:first-child {
background-color: #3BB4C1;
}
input[type="text"], input[type="password"]{
font-style:oblique;
} <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Formulario</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container" id="contentPrincipal">
<div class="row">
<div class="columnaIzquierda col-6">
<div class="row">
<div class="col text-center">
<h2>Registrate</h2>
</div>
</div>
<div class="row">
<div class="col">
<form action="" method="">
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="nombre" placeholder="Introduce tu nombre">
</div>
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="apellidos" placeholder="Introduce tus apellidos">
</div>
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-address-card"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="dni" placeholder="Introduce tu DNI">
</div>
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="edad" placeholder="Introduce tu edad">
</div>
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-home"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="direccion" placeholder="Introduce tu dirección">
</div>
<div class="form-group row justify-content-center">
<div class="co-6">
<input type="submit" class="btn btn-primary" name="enviar" value="Registrar">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col text-center">
<h2>Iniciar Sesión</h2>
</div>
</div>
<div class="row">
<div class="col columnaDerecha">
<form action="" method="">
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-user"></i></span>
</div>
<input type="text" class="form-control col-7" name="nombre" id="nombre" placeholder="Introduce tu nombre de usuario">
</div>
<div class="form-group input-group row justify-content-center">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control col-7" name="nombre" id="nombre" placeholder="Introduce tu contraseña">
</div>
<div class="form-group row justify-content-center">
<div class="col-6">
<input type="submit" class="btn btn-primary" name="enviar" value="Ingresar">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</body>
</html> My problem resides in this CSS selector: .columnaIzquierda div:first-child {
background-color: #3BB4C1;
}
From the left column I want to select the first div that the row where it says "Register" but when I visualize in the browser it paints me the whole column, I go to the inspector and it actually puts me that selects that row. So I do not understand why he's selecting everything for me. If I add a class there is no problem. I hope you can help me, thank you.