CODEWITHSUNDEEP
css
user2881809
user2881809

Reputation:

CSS3 How use style only for first div in div?

Code:

<div class="BlockContent">
    <div class="input">
        <div class="icon">&nbsp;</div>
        <input type="text" name="username">
    </div>
    <div class="input">
        <div class="icon"></div>
        <input type="password" name="username">
    </div>
</div>

CSS:

.BlockContent .input:first{
    margin-top: 16px;
}

.BlockContent .input{
    margin-bottom: 8px;
}

Tell me please how change line css .BlockContent .input:first that only first div.input have style margin-top: 16px; ?

Upvotes: 1

Views: 273

Answers (4)

ralph.m
ralph.m

Reputation: 14365

Not a direct answer here, but a better solution. Rather than padding an empty, non-semantic div, it would be better to add padding or margin on an existing element. For example, you could set top inner padding on the input container, or top margin on the input itself.

Upvotes: 0

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

You just missed one word i think.

.BlockContent .input:first-child{
    margin-top: 16px;
}

Upvotes: 1

Floris
Floris

Reputation: 653

Try .BlockContent .input:first-child { ... }

Upvotes: 2

cbnz
cbnz

Reputation: 674

You’re looking for :first-child

.BlockContent .input:first-child {}

Upvotes: 3

Related Questions