CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

How can I make a different CSS for the first child <div>?

I have the following HTML:

<div class="columns clearfix">
   <div class="xl float-left gutter-right" 
        data-ng-show="modal.data.createdDate">
        <span class="label">Created</span>
        <input class="full-width"  type="text" value="{{modal.data.createdDate }}" />
   </div>
   <div class="xl float-left" 
        data-ng-show="modal.data.modifiedDate">
        <span class="label">Modified</span>
        <input class="full-width" type="text" value="{{modal.data.modifiedDate }}"/>
   </div>
</div>

I am looking for a way to simplify this HTML with some CSS. Can someone tell me how I could remove the gutter-right and inline and make it so that this is introduced with a class in the top-level <div>? Somehow I want to specify gutter-right but just have it for the first inside <div>. Note I am using IE9 browsers and above. Also if it's possible I would like to have it so I don't need to specify the span.label and the input.full-width.

Note the reason I am trying to do this is because I have many fields set up like that with two fields on a row and a label above each field.

CSS:

.float-left {
   float: left;
}
.gutter-right {
   margin-right: 2rem;
}
.form label, .form .label {
   display: block;
   margin-bottom: 0.5rem;
}
.full-width {
   box-sizing: border-box;
   width: 100%;
}

Upvotes: 1

Views: 109

Answers (3)

SlightlyCuban
SlightlyCuban

Reputation: 3255

Instead of a rule for .gutter-right, go for .xl:first-child:

.xl:first-child {
   margin-right: 2rem;
}

Fiddle first-child on MDN

Upvotes: 0

Albzi
Albzi

Reputation: 15609

Just use element:nth-child(1){ /*whatever*/ }

or element:first-child { /*whatever*/ }

You can also use element:nth-of-type(1){ /*whatever*/ }

Upvotes: 3

Ishan Jain
Ishan Jain

Reputation: 8171

You can just use E:first-child css selector.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Example

List of CSS selectors

Upvotes: 0

Related Questions