Tidadigi Logo

CSS #id Selector

ID selector trong CSS được dùng để chọn một phần tử. Nó dựa trên thuộc tính id của phần tử đó. Thuộc tính này phải là duy nhất trên trang web. Không có hai phần tử nào được có cùng một id. ID selector bắt đầu bằng ký tự # trong CSS.

Basic ID Selector

ID selector cho phép tạo kiểu cho một phần tử cụ thể. Bạn có thể nhắm mục tiêu đến thuộc tính id duy nhất của nó. Điều này rất phù hợp nếu bạn chỉ muốn dùng kiểu cho một phần tử. Phần tử này chỉ xuất hiện một lần trên trang.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #header {
            color: blue;
            font-size: 24px;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div id="header">Header Content</div>
</body>
</html>
<!--Driver Code Ends-->

Syntax

#elementId {
    /* styles */
}

Trong đó element Id là giá trị của thuộc tính id trên phần tử HTML. Bạn muốn nhắm mục tiêu đến phần tử này.

How Does the ID Selector Work

ID selector rất cụ thể vì thuộc tính id là duy nhất trên trang. Sử dụng `#id selector` là cách hiệu quả để tạo kiểu cho một phần tử. Tính cụ thể này có nghĩa kiểu dùng ID selector sẽ ghi đè kiểu khác. Các selector kém cụ thể hơn như class selector sẽ bị ghi đè.

. ID Selector for Styling a Button

Sử dụng ID selector để nhắm mục tiêu đến các nút và áp dụng kiểu duy nhất. Chẳng hạn như màu nền và padding. Điều này hữu ích để tạo nút có thiết kế riêng biệt trên website.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #submitBtn {
            background-color: green;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        #submitBtn:hover {
            background-color: darkgreen;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <button id="submitBtn">Submit</button>
</body>
</html>
<!--Driver Code Ends-->

. Styling Section with a Specific ID

ID selector có thể tạo kiểu cho toàn bộ section của trang web. Nó giúp tạo bố cục nhất quán dễ dàng hơn. Bạn có thể áp dụng màu nền và padding cho một phần nội dung.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #about {
            background-color: #f4f4f4;
            padding: 20px;
            margin-top: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <section id="about">
        <h2>About Us</h2>
        <p>We are a leading company in the industry...</p>
    </section>
</body>
</html>
<!--Driver Code Ends-->

. Combining ID Selector with Pseudo-Classes

Kết hợp ID selector với pseudo-classes như `:hover` để tạo phần tử tương tác. Chẳng hạn, thay đổi màu nền của nút khi người dùng di chuột qua.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #submitBtn {
            background-color: green;
            color: white;
            padding: 10px 20px;
        }
        #submitBtn:hover {
            background-color: darkgreen;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <button id="submitBtn">Submit Again</button>
</body>
</html>
<!--Driver Code Ends-->

. Targeting Nested Elements with an ID Selector

ID selectors cũng có thể nhắm mục tiêu các phần tử lồng nhau trong container. Điều này giúp tạo kiểu chính xác cho phần tử con. Ví dụ: văn bản hoặc liên kết bên trong thẻ div hoặc section.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #footer {
            background-color: #333;
            color: white;
            padding: 20px;
        }

        #footer span {
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div id="footer">
        <p>Contact us: <span>info@example.com</span></p>
    </div>
</body>
</html>
<!--Driver Code Ends-->

. ID Selector for Navigation

Khi tạo kiểu cho thanh điều hướng, ID selector cung cấp cách áp dụng kiểu duy nhất cho toàn bộ phần tử điều hướng. Nó giúp xác định kích thước phông chữ, màu nền và căn chỉnh.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #nav {
            font-size: 18px;
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <nav id="nav">Navigation Menu</nav>
</body>
</html>
<!--Driver Code Ends-->

. ID Selector for Targeting Forms

Bạn có thể dùng ID selector để tạo kiểu riêng cho các form. Bạn có thể áp dụng padding, viền và khoảng cách. Điều này rất tốt để làm cho form hấp dẫn, dễ điền.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #contactForm {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
        }
        #contactForm input {
            margin-bottom: 10px;
            padding: 8px;
            width: 100%;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <form id="contactForm">
        <input type="text" name="name" placeholder="Your Name">
        <input type="email" name="email" placeholder="Your Email">
        <button type="submit">Submit</button>
    </form>
</body>
</html>
<!--Driver Code Ends-->

. ID Selector for Elements with Specific Layout

ID selector rất phù hợp để tạo kiểu cho các phần tử có bố cục riêng. Ví dụ như footer. Bạn có thể điều chỉnh margin, padding và màu nền cho phù hợp thiết kế trang.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #footer {
            margin-top: 30px;
            padding: 20px;
            background-color: #222;
            color: white;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div id="footer">Footer Content</div>
</body>
</html>
<!--Driver Code Ends-->

. Combining Multiple IDs with Other Selectors

Bạn có thể kết hợp ID selector với các selector khác như element hoặc class. Điều này giúp nhắm mục tiêu phần tử con cụ thể. Nó cung cấp nhiều quyền kiểm soát hơn đối với cấu trúc lồng nhau. Ví dụ: chỉ tạo kiểu cho thẻ h1 bên trong section có ID cụ thể.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #header h1 {
            color: red;
            font-size: 24px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <section id="header">
        <h1>Welcome to My Website</h1>
    </section>
</body>
</html>
<!--Driver Code Ends-->

. Using ID Selector for Unique Content

Khi bạn cần áp dụng kiểu duy nhất cho các phần nội dung cụ thể, hãy dùng ID selector. Điều này giúp các phần tử cụ thể nổi bật. Nó rất tốt để tạo các section đặc biệt như hộp kêu gọi hành động.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #uniqueBox {
            background-color: lightblue;
            padding: 15px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div id="uniqueBox">This is a unique content box.</div>
</body>
</html>
<!--Driver Code Ends-->

. Overriding Other Selectors Using ID Selector

Do có tính đặc hiệu cao, ID selector có thể ghi đè các selector khác như kiểu dựa trên class. Điều này rất hữu ích khi bạn muốn đảm bảo kiểu của một phần tử cụ thể được ưu tiên.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            background-color: lightgray;
            padding: 15px;
            text-align: center;
        }
        #specialBox {
            background-color: yellow;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box">This is a general box.</div>
    <div id="specialBox" class="box">This is a special box with unique styling.</div>
</body>
</html>
<!--Driver Code Ends-->

. ID Selector for Animations or Transitions

ID selector có thể kết hợp với CSS transitions hoặc animations để thêm hiệu ứng động. Bạn có thể thêm hiệu ứng cho các phần tử. Điều này cho phép tạo hiệu ứng mượt mà cho các thuộc tính như kích thước hoặc vị trí. Hiệu ứng xảy ra khi di chuột hoặc di chuột hoặc nhấp vào.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        #box {
            background-color: lightcoral;
            width: 100px;
            height: 100px;
            transition: transform 0.3s;
            margin: 20px;
        }
        #box:hover {
            transform: scale(1.2);
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div id="box"></div>
</body>
</html>
<!--Driver Code Ends-->

. Overriding element selector by id selector

ID selector có tính đặc hiệu cao hơn so với element selector. Điều này nghĩa là nó sẽ ghi đè mọi kiểu áp dụng cho các phần tử cùng loại. Bạn có thể dùng nó để áp dụng kiểu riêng cho các phần tử cụ thể. Nó sẽ không ảnh hưởng đến các phần tử khác.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            color: green;
            font-size: 16px;
        }
        #specialText {
            color: red;
            /* Overrides the paragraph color */
            font-size: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>This is a regular paragraph.</p>
    <p id="specialText">This paragraph has overridden styles using an ID selector.</p>
</body>
</html>
<!--Driver Code Ends-->

Last Updated : 21/07/2025