Element:First-Child Does Not Work

Asked

Viewed 327 times

2

In this example below there is an element .title. And in it I’m putting one first-child with margin-top:20px;. When compiling and saving is not working. Do not apply the top margin on the first element of this 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>
html css less

2 answers

5

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

Anyway, looking at your HTML more calmly, you’re sure it shouldn’t 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>

There you can put generic styles in the headers, specialize by id of the headers you want to specialize in, and if the server chokes and is not serving CSS, the page is still readable, with standard browser formatting.

  • I don’t understand. I’m making a &:first-child in the specific element .title and not in the parent element .linha-infantil. I’ve used this one first-of-type. Unsuccessful too. I’m using Codekit. This program already compiles code that works for all browsers. > 5%, last 5 versions, ie >= 5.5, ff >= 2, Chrome >= 4, Safari >= 3.1, Opera >= 9.5,ios >= 3.2, android >= 2.1

  • 1

    I was talking nonsense to :first-of-type: the definition of "first" is specific to tags, it seems. Having said that, I made a Jsfiddle illustrative: :first-child is a property that applies to son, and not to the father, in spite of whom is the first child depend, obviously, on the father.

  • So in Jsfiddle I put one <p>Teste</p> above the first span of the first div. And did not heed the background in the first span. Only on the second div, in the first span who accepted. And you specified for the span in CSS. So the same thing is happening to me. I’m going to have to create a separate class, like, .marginTop and set in the first element div.title. But I really wanted to use the pseudo-element.

  • :first-child works that way; it is intentional that it stops receiving the background. I think you are suffering because the structure of your document is not compatible with the semantics of your document. Why do you want to use the pseudo-element? Because the HTML I put in the answer is no better from your point of view?

  • 1 - Why do I want to use the pseudo-element ? - I am using LESS. 2 - Why is the HTML you put in the answer not better from my point of view ? - Exactly. And it didn’t work and the structure of my HTML is exactly as it has to be. It can’t be like your Jsfiddle. But thank you.

0


Solved.

I specified a class for the element.

.marginTop10 {
    margin-top: 10px;
}

<h2 class='marginTop10'>Teste</h2>

Browser other questions tagged html css less

You are not signed in. Login or sign up in order to post.