Element: First-Child Does Not Work

Navigation
2

In this example you have a .title element. And in it I am putting first-child with margin-top:20px; . When compiling and saving is not working. Do not apply the top margin on the first element of that type.

LESS

What happens? 

       .linha-infantil{
            background-color: #44A5D7;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            .faixa-amarela{
                line-height: 40px;
                color: #000;
                width: 100%;
                background-color: #FFF;
                text-align: center;
                border-radius: 10px;
                font-size: 20px;
            }

            .title{
                font-size: 46px;
                color: #FFF;
                text-align: center;
                font-family: "Candara";
                &:first-child{
                    margin-top: 20px;
                }
            }

            .owl-carousel{
                .item{
                    padding: 30px;
                }
            }
        }

HTML 

        <div class="linha-infantil">
            <div class="faixa-amarela">
                Linha Infantil
            </div>

            <div class="title">DIA</div>

            <div class="owl-carousel">
                <div class="item">{{ HTML::image('img/marcas/') }} </div>
                <div class="item">{{ HTML::image('img/marcas/') }} </div>
                <div class="item">{{ HTML::image('img/marcas/') }}</div>
                <div class="item">{{ HTML::image('img/marcas/') }} </div>
            </div>

            <div class="title">EQUATE</div>

            <div class="owl-carousel">
                <div class="item">{{ HTML::image('img/marcas/') }} </div>
                <div class="item">{{ HTML::image('img/marcas/') }} </div>
            </div>

        </div>
    
asked by anonymous 12.06.2015 / 14:54

2 answers

0

Resolved.

I have specified a class for the element. 

.marginTop10 {
    margin-top: 10px;
}

<h2 class='marginTop10'>Teste</h2>
    
25.06.2015 / 16:50
5

.title is not the first child (which, in this case, is .faixa-amarela ). If .faixa-amarela will always precede .title (and there will always be a maximum .faixa-amarela ), use .faixa-amarela + .title , which works in IE 8 +.

Anyway, by looking at your HTML more calmly, you're sure that it should not be something like 

    <div id="linha-infantil">
        <h1>Linha Infantil</h1>

        <h2 id="linha-infantil-dia">DIA</h2>

        <ul class="owl-carousel">
            <div class="item">{{ HTML::image('img/marcas/') }} </div>
            <div class="item">{{ HTML::image('img/marcas/') }} </div>
            <div class="item">{{ HTML::image('img/marcas/') }}</div>
            <div class="item">{{ HTML::image('img/marcas/') }} </div>
        </ul>

        <h2 id="linha-infantil-equate">EQUATE</h2>

        <ul class="owl-carousel">
            <li>{{ HTML::image('img/marcas/') }}</li>
            <li>{{ HTML::image('img/marcas/') }}</li>
        </ul>
    </div>

Then you can put generic styles in the headers, specialize with id of the headers you want to specialize, and if the server chokes and is not serving CSS, the page is still legible, / p>     

12.06.2015 / 15:02
Color matching tools [closed] Displaying an image instead of two using og: image