Cách xác định bộ chọn của một phần tử - 05

Cách xác định bộ chọn của một phần tử – 05

– Như chúng ta đã biết: “Trong CSS, khi muốn định dạng cho một phần tử thì công việc đầu tiên mà chúng ta cần phải làm đó chính là xác định phần tử mà mình muốn định dạng”.

– Đối với phương pháp Inline CSS, việc xác định phần tử mà mình muốn định dạng khá là đơn giản, chúng ta chỉ cần đặt thuộc tính style vào bên trong thẻ mở của phần tử, thế là xong !

– Tuy nhiên, đối với phương pháp Internal CSS & External CSS thì việc xác định phần tử mà mình muốn định dạng là một điều tương đối khó, bởi vì nó cần phải thông qua bộ chọn.

Vậy, câu hỏi được đặt ra ở đây là:

“làm thế nào để xác định bộ chọn của một phần tử !?”

1) Xác định bộ chọn của phần tử dựa theo id

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo id của nó: #id

Ví dụ:

– Chọn phần tử có id là css

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #css{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 id="html">Tài liệu học HTML</h1>
    <h1 id="css">Tài liệu học CSS</h1>
    <h1 id="js">Tài liệu học JavaScript</h1>
</body>
</html>

2) Xác định bộ chọn của phần tử dựa theo class

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên class của nó: .class

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        .html{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 class="html">Tài liệu học HTML</h1>
    <h1 class="css">Tài liệu học CSS</h1>
    <h1 class="js">Tài liệu học JavaScript</h1>
</body>
</html>

3) Xác định bộ chọn của phần tử dựa theo tên thẻ

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo tên thẻ: tagname

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        h1{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>Tài liệu học HTML</h1>
    <p>- Bài học html số 1</p>
    <p>- Bài học html số 2</p>
    <p>- Bài học html số 3</p>
    <h1>Tài liệu học CSS</h1>
    <p>- Bài học css số 1</p>
    <p>- Bài học css số 2</p>
    <p>- Bài học css số 3</p>
    <h1>Tài liệu học JavaScript</h1>
    <p>- Bài học javascript số 1</p>
    <p>- Bài học javascript số 2</p>
    <p>- Bài học javascript số 3</p>
</body>
</html>

4) Xác định bộ chọn của phần tử dựa theo thuộc tính HTML

– Dưới đây là cú pháp dùng để xác định bộ chọn của một phần tử dựa theo thuộc tính HTML: [attribute]

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>Tài liệu học HTML</1>
    <h1>Tài liệu học CSS</1>
    <h1 title="Xin chào">Tài liệu học JavaScript</h1>
</body>
</html>

5) Xác định bộ chọn của phần tử dựa theo giá trị thuộc tính HTML

– Đối với việc xác định bộ chọn của một phần tử dựa theo “giá trị thuộc tính HTML” thì nó thường được chia ra thành sáu trường hợp (tương ứng với sáu loại bộ chọn)

Trường hợp 1: [attribute=value]

– Giá trị của thuộc tính phải hoàn toàn trùng khớp với chuỗi ký tự được chỉ định.

– Ví dụ: Chọn phần tử có thuộc tính title với giá trị là yeu

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title="yeu"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="toi yeu em">Lập Trình Web 01</h1>
    <h1 title="tinh yeu">Lập Trình Web 02</h1>
    <h1 title="yeu">Lập Trình Web 03</h1>
    <h1 title="tinhyeu">Lập Trình Web 04</h1>
    <h1 title="yeudonphuong">Lập Trình Web 05</h1>
</body>
</html>

Trường hợp 2: [attribute~=value]

– Giá trị của thuộc tính phải có chứa từ (word) được chỉ định.

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa từ yeu

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title~="yeu"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="toi yeu em">Lập Trình Web 01</h1>
    <h1 title="tinh yeu">Lập Trình Web 02</h1>
    <h1 title="yeu">Lập Trình Web 03</h1>
    <h1 title="tinhyeu">Lập Trình Web 04</h1>
    <h1 title="yeudonphuong">Lập Trình Web 05</h1>
</body>
</html>

Trường hợp 3: [attribute*=value]

– Giá trị của thuộc tính phải có chứa chuỗi ký tự được chỉ định.

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải có chứa chuỗi yeu

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title*="yeu"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="toi yeu em">Lập Trình Web 01</h1>
    <h1 title="yeu">Lập Trình Web 02</h1>
    <h1 title="tinhyeu">Lập Trình Web 03</h1>
    <h1 title="tinh ban">Lập Trình Web 04</h1>
</body>
</html>

Trường hợp 4: [attribute^=value]

– Giá trị của thuộc tính phải được bắt đầu bởi chuỗi ký tự được chỉ định.

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải bắt đầu bằng chuỗi tinh

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title^="tinh"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="tinh yeu">Lập Trình Web 01</h1>
    <h1 title="tinh-ban">Lập Trình Web 02</h1>
    <h1 title="tinhdongchhi">Lập Trình Web 03</h1>
    <h1 title="tinh">Lập Trình Web 04</h1>
    <h1 title="yeu tinh">Lập Trình Web 05</h1>
</body>
</html>

Trường hợp 5: [attribute$=value]

– Giá trị của thuộc tính phải được kết thúc bởi chuỗi ký tự được chỉ định.

- Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải kết thúc bởi chuỗi yeu

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title$="yeu"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="tinh yeu">Lập Trình Web 01</h1>
    <h1 title="nguoiyeu">Lập Trình Web 02</h1>
    <h1 title="yeu">Lập Trình Web 03</h1>
    <h1 title="yeu tinh">Lập Trình Web 04</h1>
</body>
</html>

Trường hợp 6: [attribute|=value]

– Giá trị của thuộc tính phải được bắt đầu bởi một từ (word) được chỉ định.

– Lưu ý: Từ (word) đó phải là độc lập hoặc được nối tiếp bởi một dấu gạch nối.

– Ví dụ: Chọn phần tử có thuộc tính title với điều kiện là giá trị của nó phải được bắt đầu bởi từ yeu

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        [title|="yeu"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="yeu">Lập Trình Web 01</h1>
    <h1 title="yeu-em">Lập Trình Web 02</h1>
    <h1 title="yeu em">Lập Trình Web 03</h1>
    <h1 title="yeuem">Lập Trình Web 04</h1>
</body>
</html>

6) Xác định bộ chọn của phần tử dựa theo nhiều yếu tố

– Để xác định bộ chọn của một phần tử dựa theo nhiều yếu tố thì trước tiên chúng ta cần phải xác định bộ chọn của phần tử dựa theo từng yếu tố, sau đó ghép tất cả các bộ chọn lại với nhau.

Ví dụ:

– Để xác định bộ chọn của phần tử <h1>, có class là big, có thuộc tính title với giá trị là xin chao thì bộ chọn sẽ được viết như sau:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        h1.big[title="xin chao"]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>Tài liệu học HTML</h1>
    <h1 class="big">Tài liệu học CSS</h1>
    <h1 class="big" title="xin chao">Tài liệu học JavaScript</h1>
    <h1 class="big" title="xin chao cac bạn">Tài liệu học MySQL</h1>
</body>
</html>

- Lưu ý: Tên thẻ phải luôn được đặt ở vị trí đầu tiên.

7) Chọn tất cả các phần tử : *

– Dưới đây là cú pháp dùng để chọn hết tất cả các phần tử.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        *{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <p>Tài liệu học HTML</p>
    <div>Tài liệu học CSS</div>
    <h1>Tài liệu học JavaScript</h1>
</body>
</html>