Tìm hiểu cách chọn tất cả HTML elements trừ first với CSS selector `:not(:first-child).
Nếu bạn thêm rule-set sau vào CSS stylesheet, mọi h2 element trên toàn website sẽ có 64px top margin.
h2 { margin-top: 64px; }Nhưng nếu bạn không muốn top margin cho h2 element đầu tiên trên website nói chung, mà mọi h2 element khác?
Dùng selector :not(:first-child)
Thêm rule-set sau vào stylesheet:
h2:not(:first-child) { margin-top: 64px; }Bây giờ mọi h2 element trên website sẽ consistently có cùng margin-top value — trừ h2 element đầu tiên trên mỗi document (page/post).
Use case cho selector :not(:first-child)
Giả sử bạn styling typographic layout website. Bạn quyết định tất cả h2 heading elements của articles nên có margin-top: 64px; để breathing room giữa các section.
Nhưng ở top mỗi article, bạn có intro section phong cách magazine/poster với cover image, overlay và các text elements trên. Trong trường hợp đó, bạn có thể dùng vài heading elements (h1 cho title, h2 cho tagline, v.v.).
Trong trường hợp đó, bạn có thể không muốn dùng chính xác cùng spacing values (margin/padding) trong intro section, như bên trong article. Bằng cách dùng selector :not(:first-child), bạn loại bỏ vấn đề đó.
Bạn có thể dùng selector này trên mọi HTML element. Use case phổ biến khác: nếu bạn dùng unordered list <ul> cho menu. Bạn có thể có styling rất cụ thể muốn thêm cho ul trong menu, nhưng không phải phần còn lại của site (alignment, borders, colors, v.v.).
CSS không phải toàn bộ về styling với classes bây giờ sao?
Trong modern web development, phổ biến tránh styling element selectors trực tiếp. Đa số dùng classes giờ. Tôi cũng fan của classes, vì chúng làm việc viết CSS scalable và reusable dễ dàng hơn trên web platforms đang lớn.
Tuy nhiên, direct selector styling vẫn có chỗ đứng. Thực tế để thiết lập baseline/global styling trực tiếp trên element selectors để tự động instill consistency và uniformity xuyên suốt product UI. Approach này có thể tiết kiệm nhiều repetitive UI styling — khi làm đúng.