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

#1

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
#2

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

5 Likes
#3 
<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

#5

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
#6

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
#8

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

2 Likes
#9

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
#10

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

4 Likes
#11

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?