Question 184118 in Html Question posted in
Some basic documentation can be found here.

Html – How to ue CSS pseudo-class as a first child

I have a form with two inputs. I want to select only the first input to add the radius in top-left and bottom-left but when I use CSS pseudo it applies to other (in my example second) input as well.
(in
enter image description here

CSS:

.my-stupid-form {
    margin: 0 auto;
    max-width: 70%;
}
.iconic-input {
    margin: 1em 0;
    display: flex;
    font-size 1.4em;

}
.iconic-input__label {
    background-color: yellow;
    padding: .2em 1em;
    line height: 2;
    
}
.iconic-input__input {
    border: none;
    padding: .2em;
    font: inherit;
    flex-grow: 1;
    width: 100%;
}
form.my-stupid-form input:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.iconic-input__button {
    background-color: yellow;
    border: none;
    font: inherit;
    padding: .5em 1em;
}

HTML:

<form action="" class="my-stupid-form">
    <div class="iconic-input">
      <label class="iconic-input__label" for="input1">☺</label>
      <input class="iconic-input__input" type="text">
    </div>

    <div class="iconic-input">
      <label class="iconic-input__label" for="input2">☏</label>
      <input class="iconic-input__input" type="text">
      <button class="iconic-input__button">submit</button>
    </div>
  </form>

I tried these codes but both inputs are selected:

1)

form.my-stupid-form input:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

form.my-stupid-form input:first-of-type {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
Tags:

2

Answers


  1. 0

    Here is the fixed code :

    .my-stupid-form {
    margin: 0 auto;
    max-width: 70%;
}
.iconic-input {
    margin: 1em 0;
    display: flex;
    font-size 1.4em;

}
.iconic-input__label {
    background-color: yellow;
    padding: .2em 1em;
    line height: 2;
    
}
.iconic-input__input {
    border: none;
    padding: .2em;
    font: inherit;
    flex-grow: 1;
    width: 100%;
}

form.my-stupid-form #input1 {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.iconic-input__button {
    background-color: yellow;
    border: none;
    font: inherit;
    padding: .5em 1em;
}
    <form action="" class="my-stupid-form">
    <div class="iconic-input">
      <label class="iconic-input__label" for="input1">☺</label>
      <input class="iconic-input__input" id="input1" type="text">
    </div>

    <div class="iconic-input">
      <label class="iconic-input__label" for="input2">☏</label>
      <input class="iconic-input__input" id="input2" type="text">
      <button class="iconic-input__button">submit</button>
    </div>
  </form>

    I used an id because you used the for property in your labels.
    The first input is round at the left but the emoji is at the right but I guess it is because you only gave the necessary CSS and HTML to reproduce.

    Login or Signup to reply.
  2. 0

    In fact you want the input of the first div child

    form.my-stupid-form div.iconic-input:first-child input {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search