Chọn thẻ div đầu bằng css

em mới học về css cơ bản, mà đến phần vùng chọn em rối quá.
có ví dụ như thế này
em muốn cho màu chỉ

<p>Đây là thành phần p1 nằm bên trong thành phần div</p>
<p>Đây là thành phần p2 nằm bên trong thành phần div</p>

còn thẻ div con trong không cho màu.
code html

<div>
    <p>Đây là thành phần p1 nằm bên trong thành phần div</p>
    <p>Đây là thành phần p2 nằm bên trong thành phần div</p>
    <div>
    <p>Đây là thành phần p1 con nằm bên trong thành phần div cha</p>
    <p>Đây là thành phần p2 con nằm bên trong thành phần div cha</p>
    </div>

</div>

code css em làm như thế này

div>p {
    color: #ff0000;
}

em làm thế thì không chọn được mà nó chọn hết 2 thẻ div luôn, vậy làm thế nào để chọn được thẻ div đầu ạ

1 Like

đặt tên class hoặc id cho thẻ đi bạn, đừng dùng selector cho thẻ.

4 Likes
<div id="cha" class="cha">
    <p>Đây là thành phần p1 nằm bên trong thành phần div</p>
    <p>Đây là thành phần p2 nằm bên trong thành phần div</p>
    <div id="con" class="con">
    <p>Đây là thành phần p1 con nằm bên trong thành phần div cha</p>
    <p>Đây là thành phần p2 con nằm bên trong thành phần div cha</p>
    </div>

</div>

mình css như thế này có áp dụng cả css con, muốn làm phần của “cha” thôi ko đc

#cha > p {
    color: #ff0000;
}

nó vẫn bao gồm cả phần con, mình muốn

của phần cha có màu thôi

Mình không hiểu rõ ý bạn lắm, ý là chỉ làm 1 p đầu là màu khác phải không?

<div id="cha" class="cha">
    <p>(Cái này?) Đây là thành phần p1 nằm bên trong thành phần div</p>
    <p>Đây là thành phần p2 nằm bên trong thành phần div</p>
    <div id="con" class="con">
        <p>Đây là thành phần p1 con nằm bên trong thành phần div cha</p>
       <p>Đây là thành phần p2 con nằm bên trong thành phần div cha</p>
    </div>
</div>

Còn nếu bạn muốn 2 p đầu là màu khác thì code của bạn ngay phía trên đã ok rồi đấy.

5 Likes

mình muốn chọn 2 p đầu màu đỏ đó, mà khi chạy thì cả phần div con vẫn có màu đỏ

3 Likes

Thì đẻ thêm đứa nữa đi.

2 Likes

Làm sao có chuyện đó được. Chắc bạn lại có định nghĩa nào đó nhầm lẫn sao đấy. Chứ ở trên đã ổn rồi. Chắc cú hơn nữa chơi:

#cha.cha > p {
    color: red;
}

Kết quả là đây: https://codepen.io/superthin/pen/ZEWWBWw

5 Likes

Cái css đã đúng, xem lại trình duyệt có cache css cũ không
Và bahn nên tham khảo từ khóa: css selector, css calculator

3 Likes

cảm ơn các bác đã trợ giúp, em đã thông suốt rồi ạ :slight_smile:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?