Html – css

Combinator css (bộ chọn kết hợp css)

Div p chọn tất cả thẻ p là con, cháu, chắt… của thẻ div)
div>p chọn tất cả thẻ p là con trực tiếp của thẻ div

Class1+h2 chọn một thẻ h2 sát ngay sau class1

Class1~h2 chọn tất cả thẻ h2 sát ngay sau class1

Attribute css (bộ chọn thuộc tính css)

[href] tác động lên thẻ nào đó có thuộc tính là href còn href bằng bao nhiêu không quan tâm

[target=”_blank”] chọn tất cả thẻ có thuộc tính targer là _blank. Phải có giá trị đúng bằng _blank

[title~=”the1”] chọn tất cả thẻ có thuộc tính là title và trong giá trị có chứa chữ the1 đặt độc lập. ví dụ: title=”abc the1 def”

[title*=”the1”] chọn tất cả thẻ có thuộc tính là title và trong giá trị có chứa chữ the1 không cần thiết phải độc lập ví dụ: title=”abcthe1def”

[title|=”the1″] chọn tất cả thẻ có thuộc tính là title và trong giá trị phải bắt đầu bằng the1 hoặc the1-abc. Nếu the1<dấu cách><nội dung khác> thì không được. Hiểu đơn giản nó là một từ duy nhất bắt đầu bởi chữ the1. Dấu “-“ dung để nối các chữ lại thành 1 từ duy nhất. ví dụ: the1-the2-the3, cái này sẽ dung dấu – để nối nó thành một từ duy nhất

[title^=”the1″] chọn tất cả thẻ có thuộc tính là title và trong giá trị phải bắt đầu bằng the. Chỉ cần bắt đầu bằng the1 là được. không nhất thiết là một từ duy nhất ví dụ: title=”the1” hoặc title-“the1 abc def” hoặc title=”the123456”đều được

[target$=”lf”] chọn tất cả thẻ có thuộc tính là target và trong thuộc tính có giá trị kết thúc là chữ lf. Ví dụ target=”_self”

Pseudo-classes (lớp giả css)

:link có thể dung để hiển thị link mặc định với màu hoặc kích thước… khác khi chưa truy cập. mặc định link có màu xanh và có gạch chân bên dưới
:empty dung để chọn thẻ không có nội dung ví dụ có

html: <div class=”thediv”></div>

Css: .thediv:empty{color: red; height: 200px; width: 200px;}
tạo ra một vùng màu đỏ có kích thước 200×200 và có màu đỏ. Nếu trong thẻ div có nội dung. Vùng này sẽ biến mất
:target ví dụ có link <a href=”#muctieu3”>Chuyển tới mục tiêu</a>

Và có 3 đoạn văn như sau:

<p id=”muctieu1″>đoạn văn 1</p>

<p id=”muctieu2″>đoạn văn 2</p>

<p id=”muctieu3″>đoạn văn 3</p>

css: #muctieu3:targer{

          Color: red;

          Font-size: 20px;

}

Khi ấn vào link “chuyển tới mục tiêu: thì trên trình duyệt sẽ có hash name tương ứng. ví dụ: https://yourdomain.com/#muctieu3. Lúc này sẽ nhảy tới hiển thị đoạn văn có id=”muctieu3” và màu sắc của đoạn văn đó chuyển sang màu đỏ, cỡ chữ tang lên 30px.

Ví dụ có đoạn html:
<div class=”doanvan”>

        <p id=”doanvan1″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan2″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan3″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan4″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan5″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan6″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan7″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan8″>Lorem ipsum dolor sit amet.</p>

    </div>

    <div>

        <p id=”doanvan9″>Lorem ipsum dolor sit amet.</p>

    </div>

css:

p:first-child{

    color: red;

}

P là thẻ con đầu tiên có id=”doanvan1”sẽ có màu đỏ. Nếu chèn thêm một thẻ h1 hoặc một thẻ bất kỳ trước thẻ p đầu tiên chẳng hạn. thì thẻ p lúc này không còn là thẻ con đầu tiên nữa nên sẽ mất tác dụng

p:last-child{

    color: blue;

}

P là thẻ con đầu tiên tính từ dưới lên có id=”doanvan8” sẽ có màu xanh. Nếu chèn them một thẻ h1 hoặc một thẻ bất kỳ sau thẻ p đó, thì thẻ p lúc này không còn là thẻ con đầu tiên tính từ dưới lên nữa nên sẽ mất tác dụng.

p:nth-child(5){

    color: pink;

}

P là thẻ con thứ 5 tính từ đầu tiên có id=”doanvan5” sẽ có màu hồng. Nếu chèn thêm một thẻ bất kỳ trước thẻ p thì thẻ được chọn vẫn là thẻ con thứ 5. Nhưng do có thêm một thẻ phía trước nên thẻ p có id=”doanvan4” sẽ được chọn (thẻ thứ 5 lúc này thành thẻ thứ 6). Nếu chèn một thẻ khác bất kỳ ví dụ h1 trước thẻ thứ 5. Thì lúc này thẻ h1 sẽ là thẻ thứ 5 và css mất tác dụng.

p:nth-last-child(2)

{

    color: aqua;

}

Tương tự thẻ nth-child() nhưng là tính từ dưới lên

Bổ sung: Giá trị trong thẻ nth-child() hoặc nth-last-child() có thể điền trực tiếp hoặc sử dụng:
ood: cho các thẻ có giá trị lẻ, ví dụ: 1,3,5…

event: cho các thẻ có giá trị chẵn, ví dụ: 2,4,6…
hoặc sử dụng cấu trúc linh hoạt như 2n+1 cho các bước nhảy tùy chỉnh

Ví dụ cho bước nhảy tùy chỉnh:

p:nth-child(3n+1){

    color: pink;

}

Lúc này các thẻ được chọn sẽ là:

• N = 0: thẻ 1 được chọn (3n+1 = 1)
• N = 1: thẻ 4 được chọn (3n+1 = 4)
• N = 2: thẻ 7 được chọn (3n+1 = 7)

……………

p:only-child{

    font-size: 30px;

}

P là thẻ con duy nhất sẽ được chọn. Như ở trên mã html, thì 8 thẻ p đầu tiên cùng là thẻ con duy nhất của thẻ div nên sẽ không được chọn. Chỉ có thẻ p thứ 9 là thẻ con duy nhất của thẻ div thứ hai nên sẽ được chọn. Nếu có bất kỳ thẻ nào là thẻ con khác (cùng là p hoặc khác p) thì css không có hiệu lực.

Tương tự như: first-child, last-child, nth-child(), nth-last-child(), only-of-type nhưng khác ở điểm. Không quan tâm đến có thẻ ở trước hay sau hay khôngví dụ:có đoạn html sau:

<div class=”doanvan”>

        <h1>Lorem ipsum dolor sit amet.</h1>

        <p id=”doanvan1″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan2″>Lorem ipsum dolor sit amet.</p>

        <p id=”doanvan3″>Lorem ipsum dolor sit amet.</p>

    </div>

    <div>

        <p id=”doanvan4″>đây là thẻ thứ 4.</p>

        <h1></h1>

    </div>

Css:

p:first-of-type{

    color: red;

}

Thẻ p có id=”doanvan1” sẽ được chọn và có màu đỏ, mặc dù đứng nó là thẻ con thứ hai (thẻ h1 đứng trước là thẻ con đầu tiên)

tương tự cho các thẻ last-child, nth-child(), nth-last-child(), only-of-type cũng hoạt động như vậy.

Pseudo-classes not(selector)