Mastering CSS Selectors

Cascading Style Sheets (CSS) là một ngôn ngữ được sử dụng để tạo kiểu cho trang web, Ngoài làm tăng khả năng hiển thị của trang web. Nó cũng tạo kiểu cho các phần tử HTML cụ thể.

Đừng lo lắng, vì tôi ở đây để hướng dẫn bạn qua hành trình áp dụng kiểu cho các thành phần HTML của bạn bằng cách sử dụng bộ chọn CSS.

Cùng bắt đầu nào!

Bộ chọn CSS là gì (CSS Selectors)

Bộ chọn CSS cho phép bạn chọn và áp dụng chính xác kiểu mà bạn muốn áp dụng cho phần tử HTML trên trang web của mình. Chúng xác định các thành phần HTML nào sẽ bị ảnh hưởng bởi các quy tắc được xác định trong CSS.

Hiểu đơn giản, bộ chọn CSS, chọn phần tử HTML và áp dụng style cụ thể cho phần tử HTML đó.

Bây giờ cùng tìm hiểu về các loại bộ chọn CSS khác nhau.

Bộ chọn cơ bản

Chúng ta có các loại bộ chọn CSS cơ bản như sau

Element Selector

Element Selector là chọn phần tử bằng cách sử dụng HTML tag name.

Ví dụ: Tạo chữ có màu đỏ cho tất cả các thẻ <h1> 

h1 {

 color: red;

}

 

Căn chữ giữa cho tất cả các thẻ <p>

p {

  text-align: center;

}

Class Selector

Class selector chọn các phần tử dựa trên sử dụng các Class của element đó. 

Để chọn element với tên class, chúng ta cần viết cùng dấu . trước tên class

Ví dụ: Chúng ta có một đoạn mã HTML như sau: 

<h1 class="heading">This is a heading.</h1>

<p>This is a heading.</p>

<h2 class="heading">This is a also a heading.</h2>

Chúng ta có thẻ h1 và h2 có cùng class “heading”, bây giờ chúng ta sẽ chọn tất cả các phần tử có Class name là “heading”, chúng ta sẽ viết CSS như sau:

.heading{

color: red;

}

Đoạn mã CSS trên sẽ tạo kiểu màu text thành màu đỏ cho tất cả phần tử HTML có class name là “heading”

ID Selector

ID(Identify) của một phần tử là duy nhất trên một page của một website, điều đó có nghĩa, trên    một page, chúng ta sẽ không thể có 2 phần tử có cùng 1 ID, hoặc một phần tử có 2 ID.

Vì vậy ID selector sẽ chọn một phần tử có ID cụ thể.

Để chọn một element bằng cách chọn với ID, chúng ta sử dụng ký tự # phía trước tên ID

Ví dụ, với đoạn code HTML như sau:

<h1 id="heading">This is a heading.</h1>

<p>This is a heading.</p>

Để chọn phần tử có ID là “heading” chúng ta sẽ viết CSS như sau

#heading{

color: red;

}

Universal Selector

Universal selector: chọn tất các phần tử trên trang web. Để sử dụng và chọn tất cả các phần tử trên trang web, chúng ta sử dụng selector với dấu *

Ví dụ: 

* {

margin: 0;

padding: 0;

}

Trong ví dụ này, thuộc tính margin và padding sẽ được áp dụng cho tất cả các element trên trang web.

Combinators (Bộ chọn kết hợp)

Chúng ta có các bộ chọn kết hợp sau:

Descendant Combinator (Bộ chọn con cháu)

Descendant Combinator là chọn các phần tử con được xác định từ một phần tử cha.

Phần tử con là gì?
Phần tử con là một phần tử nằm trong một phần tử khác. 

Ví dụ

<div class=”parent”>

  <h1>This is a heading.</h1>

</div>

Trong ví dụ trên, phần tử H1 là phần tử con của <div> có class name là “parent” 

Bây giờ quay lại với bộ chọn con cháu trong CSS

Descendant Combinator là chọn các phần tử con của phần tử cha chứa nó. Ý tưởng chính ở đây là bạn không cần phải lo lắng về mức độ lồng nhau của các phần tử con bên trong phần tử cha. Cho dù chúng là con trực tiếp của phần tử cha hoặc không phải là con trực tiếp mà là ở một cấp độ sâu hơn chúng ta có thể gọi là cấp cháu, chắt, chút chít… đều có thể được chọn miễn sao chúng được bao bởi phần tử cha.

Để chọn phần tử con: ta có thể chọn theo tag name, class name hoặc ID của phần tử cha sau đó là 1 ký tự space và bộ chọn của phần tử con, có thể là class name, ID hoặc tag name.

Ví dụ với đoạn HTML dưới đây: 

<section class=”section”>

<p class=”text”>This is a paragraph.</p>

<div>

<p class=”text”>This is another paragraph.</p>

</div>

</section>

Để set font size 20px cho các thẻ p là con của thẻ section ta có thể viết CSS  như sau

section p {

font-size: 20px;

}

Đoạn css này có nghĩa là set font size cho tất cả thẻ p mà nằm trong thẻ section

Và đoạn css trên sẽ không được áp dụng với các thẻ p nằm ngoài section.

Bộ chọn CSS sử dụng Class attribute

<section class="header">

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</section>

CSS

.header p {

 font-size: 20px;

}

Bộ chọn CSS sử dụng ID attribute

<section id="header">

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</section>

CSS:

#header p {

 font-size: 20px;

}

Child Combinator (bộ chọn con trực tiếp)

Select con trực tiếp có nghĩa là sẽ chọn phần tử là con trực tiếp từ phần tử cha mà không chọn các phần tử cháu chắt chút chít.

Để chọn phần tử con trực tiếp chúng ta sử dụng ký tự > giữa phần tử cha và phần tử con

Ví dụ 

<ul>

<li>HTML</li>

<li>CSS</li>

</ul>

CSS

ul > li {

 font-weight: bold;

}

Ví dụ khác: 

<section>

<p>This is a paragraph.</p>

<div>

<p>This is another paragraph.</p>

</div>

</section>

Bây giờ chúng ta muốn thay đổi màu chữ của phần tử <p> là con của phần tử <section> chúng ta viết css như sau: 

section > p {

color: red;

}

Đoạn css trên sẽ không thay đổi phần tử p nằm trong <div> vì nó không phải là con trực tiếp của section.

Adjacent Sibling Combinator

Bộ chọn phần tử anh em liền kề chọn phần tử mà nằm ngay kế tiếp một phần tử cụ thể.

Nói một cách đơn giản, một bộ kết hợp anh chị em liền kề sẽ chọn một phần tử là anh chị em trực tiếp của phần tử được chỉ định và không được có phần tử nào khác ở giữa chúng.

Tổ hợp anh chị em liền kề được biểu thị bằng dấu '+'.

Ví dụ: 

<h1>This is first heading.</h1>

<h2>This is second heading.</h2>

<h2>This is another second heading.</h2>

Bây giờ chúng ta muốn thay đổi màu chữ của phần tử h2, nằm ngay sau h1 mà không phải tất cả thẻ h2. Chúng ta có thể dùng adjacent sibling combinator

h1 + h2{

 color: red;

}

Trong ví dụ trên, chỉ có h2 đầu tiên nằm ngay sau h1 sẽ có style color red, những phần tử h2 khác mà không nằm ngay sau h1 sẽ không được áp dụng đoạn css trên.