CODEWITHSUNDEEP
css
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

:nth-child selector for element in a new line

I have the form below:

.container .row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container .row:first-child > * {
  max-width: calc((100% - 24px) / 2);
  flex-basis: calc((100% - 24px) / 2);
  margin-bottom: 24px;
}

.container .row:first-child > div {
  display: flex;
  flex-direction: column;
}

.container .row:first-child label {
  line-height: 18px;
}

.container .row:first-child > a {
  padding-top: 18px;
}

textarea {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
   <textarea></textarea>
  </div>
</div>

<hr/>
<h3>Link in new line</h3>

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="email2">Email 2:</label>
      <input type="email" id="email2" name="email2">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
   <textarea></textarea>
  </div>
</div>

I want when the Add email link is in a new line to remove it's padding and the form element that's above it should have a margin-bottom of 12px instead (maybe adding a negative margin-top to the link).

enter image description here

I don't know which :nth-child(an + b of ) I should use in this case.

How can I solve this ?

Upvotes: 0

Views: 678

Answers (1)

Pete
Pete

Reputation: 58462

you should be able to remove top padding if the anchor is an odd nth-child:

.container .row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container .row:first-child>* {
  max-width: calc((100% - 24px) / 2);
  flex-basis: calc((100% - 24px) / 2);
  margin-bottom: 24px;
}

.container .row:first-child label {
  line-height: 18px;
}

.container .row:first-child>a {
  padding-top: 18px;
}

.container .row:first-child>a:nth-child(odd) {
  padding-top: 0;
  margin-bottom:12px;
}

.container .row:first-child>div {
  display: flex;
  flex-direction: column;
}

textarea {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
    <textarea></textarea>
  </div>
</div>

<hr/>
<h3>Link in new line</h3>

<div class="container">
  <div class="row">
    <div>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="email2">Email 2:</label>
      <input type="email" id="email2" name="email2">
    </div>
    <a href="#">Add email</a>
  </div>

  <div class="row">
    <textarea></textarea>
  </div>
</div>

Upvotes: 1

Related Questions