CSS target first level of class "row" only and not nested ones - css

Question

Is it possible to target only the first level of the class .row?
http://jsfiddle.net/czdagd3k/2/
<h2>{{ 'PERSONALDETAILS'|trans }} {# ({{ 'PRIVACY'|trans }}) #}</h2>
<span class="tiny-text">* {{ 'DENOTESREQUIRED'|trans }}</span>
<div class="row">
<div class="large-4 columns">
<input class="" name="firstName" tabindex="19" type="text" value="{{ data.user.firstName }}" placeholder="{{ 'FIRSTNAME'|trans }} *" autocomplete="off" required/>
</div>
<div class="large-4 columns">
<input class="" name="lastName" tabindex="20" type="text" value="{{ data.user.lastName }}" placeholder="{{ 'LASTNAME'|trans }} *" autocomplete="off" required/>
</div>
<div class="large-4 columns">
<input class="" name="emailAddress" tabindex="21" type="email" value="{{ data.user.email }}" placeholder="{{ 'EMAIL'|trans }} *" autocomplete="off" id="email" required/>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input class="email" name="confirmEmail" tabindex="22" type="email" value="" placeholder="{{ 'CONFIRMEMAIL'|trans }} *" autocomplete="off" data-equalto="email" required/>
</div>
<div class="large-4 columns select-nationality">
<select class="sel-box" required tabindex="23" id="nationality" name="nationality" data-highlight-code="2034, 2037">
{% if data.user.nationality.name is not defined %}
<option value="" selected="selected">{{ 'SELECTNATIONALITY'|trans }} *</option>
{% endif %}
{% for nationality in data.nationalities %}
{% if data.user.nationality.name == nationality.name %}
<option value="{{ nationality.name }}" selected="selected">{{ data.user.nationality.name }}</option>
{% else %}
<option value="{{ nationality.name }}">{{ nationality.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="large-4 columns select-arrival-time">
<select class="sel-box" required tabindex="24" id="arrivalTime" name="arrivalTime" data-highlight-code="2063, 2025">
<option value="" selected="selected">{{ 'ARRIVALTIME'|trans }} *</option>
{% for time in data.property.checkIn.startsAt .. data.property.checkIn.endsAt %}
<option value="{{ time }}">{{ time }}:00</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="large-4 columns telephone">
<input class="digits" name="phoneNumber" tabindex="25" type="text" value="" placeholder="{{ 'TELEPHONENUMBER'|trans }}"autocomplete="off" />
</div>
<div class="large-4 columns select-gender">
<select class="sel-box" required tabindex="26" id="gender" name="gender" data-highlight-code="2023">
<option value="" selected="selected">{{ 'SELECTGENDER'|trans }} *</option>
{% for gender in data.genderList %}
{% if gender.value == data.user.gender.id %}
<option value="{{ gender.value }}" selected="selected">{{ gender.label }}</option>
{% else %}
<option value="{{ gender.value }}">{{ gender.label }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="large-4 columns male-female-wrapper">
{% if data.reservation.property.ymca %}
<div class="row">
<div class="large-4 columns selection">
<p>{{ 'NOOFPEOPLE'|trans }}:</p>
</div>
<div class="small-8 columns male-female-select">
<div class="row">
<div class="small-6 columns male-select">
<label>{{ 'MALE'|trans }}</label>
<select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<div class="small-6 columns female-select">
<label>{{ 'FEMALE'|trans }}</label>
<select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
</div>
{% endif %}
</div>
The last block has nested rows:
<div class="large-4 columns male-female-wrapper">
{% if data.reservation.property.ymca %}
<div class="row">
<div class="large-4 columns selection">
<p>{{ 'NOOFPEOPLE'|trans }}:</p>
</div>
<div class="small-8 columns male-female-select">
<div class="row">
<div class="small-6 columns male-select">
<label>{{ 'MALE'|trans }}</label>
<select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<div class="small-6 columns female-select">
<label>{{ 'FEMALE'|trans }}</label>
<select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
</div>
{% endif %}
</div>
I only need to target the first level of the class ".row"
I have tried this but it doesn't work:
.personal-details > .row{
.columns:first-child{
padding-left:0;
}
.columns:last-child{
padding-right: 0;
}
}

Answer 1

Your code compiles to the following two selectors:
.personal-details > .row .columns:first-child
.personal-details > .row .columns:last-child
You are correctly targeting the first level of .row elements, but because the nested .columns elements are descendants of their own .row parent and the first-level .row parent, those are matched as well.
So you need to add more > combinators:
.personal-details > .row{
> .columns:first-child{
padding-left:0;
}
> .columns:last-child{
padding-right: 0;
}
}
This will produce the following selectors which will match just the top-level .columns elements:
.personal-details > .row > .columns:first-child
.personal-details > .row > .columns:last-child