Brunkz34 Posts - Answer Overflow

Brunkz34

•Created by Brunkz34 on 7/6/2023 in #front-end

Can't select with nth-child

Hi, I just started a project and I'm having a problem with the following code: HTML

<body>
    <section>
        <div class="container">
            <h3>lorem ipsum sit</h3>
            <h1 class="title">Responsive layouts don't have to be a struggle</h1>
            <h2 class="title">Quality Designs</h2>
        </div>
    </section>
</body>

<body>
    <section>
        <div class="container">
            <h3>lorem ipsum sit</h3>
            <h1 class="title">Responsive layouts don't have to be a struggle</h1>
            <h2 class="title">Quality Designs</h2>
        </div>
    </section>
</body>

CSS

.title:nth-child(1) {
    color: red
}

.title:nth-child(1) {
    color: red
}

The problem is that the nth-child pseudoclass does not select neither the h1, nor the h2. This is because (for some reason) h1 has position 2 (i.e. I can select it by typing nth-child(2)) and h2 has position 3 (same thing). It's like there's a ghost element with the class "title" that there's breaking my styles. If someone knows what's going on here plz explain me, I would appreciate it a lot!

5 replies

KPCKevin Powell - Community

•Created by Brunkz34 on 6/24/2023 in #front-end

Strange pixels showing up D:

Hello! I was doing a project by myself and something strange is going on with this code: HTML

<div class="card-top">
  <img src="https://i.pravatar.cc/300" alt="User profile picture" class="profile-picture">
</div>

<div class="card-top">
  <img src="https://i.pravatar.cc/300" alt="User profile picture" class="profile-picture">
</div>

CSS

.card-top {
    background-color: #4070f4;
}

.card-top {
    background-color: #4070f4;
}

I changed the background-color just to see that there are (exactly) 7 pixels below my image, and I honestly don't know where are those coming from. Maybe is some default setting of the page which generates the image on my HTML, but I'm not sure. Does someone know what's going on??

14 replies

KPCKevin Powell - Community

•Created by Brunkz34 on 3/17/2023 in #front-end

How to center a div without flexbox or grid

10 replies

Gaming

Programming