🎯 Bài 2: CSS Selectors

/* Selector chọn tất cả thẻ p */
p {
  color: blue;
}

/* Selector chọn thẻ có class="highlight" */
.highlight {
  background: yellow;
}

/* Selector chọn thẻ có id="header" */
#header {
  font-size: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  color: blue;
}

h1 {
  font-size: 32px;
}

div {
  background: lightgray;
}

<p class="highlight">Đoạn văn được highlight</p>
<div class="highlight">Div cũng được highlight</div>
<p>Đoạn văn bình thường</p>

.highlight {
  background: yellow;
  font-weight: bold;
}

<div id="header">Header</div>
<div id="footer">Footer</div>

#header {
  background: navy;
  color: white;
}

#footer {
  text-align: center;
}

/* Chọn TẤT CẢ thẻ p bên trong div */
div p {
  color: red;
}

/* Chọn TẤT CẢ thẻ a bên trong .menu */
.menu a {
  text-decoration: none;
}

<div>
  <p>Paragraph này sẽ màu đỏ</p>
  <section>
    <p>Paragraph này cũng màu đỏ (vì vẫn bên trong div)</p>
  </section>
</div>
<p>Paragraph này KHÔNG màu đỏ (ngoài div)</p>

/* Chỉ chọn thẻ p là CON TRỰC TIẾP của div */
div > p {
  color: blue;
}

<div>
  <p>Paragraph này màu xanh (con trực tiếp)</p>
  <section>
    <p>Paragraph này KHÔNG màu xanh (cháu, không phải con)</p>
  </section>
</div>

/* Chọn thẻ p đứng NGAY SAU h2 */
h2 + p {
  font-weight: bold;
}

<h2>Tiêu đề</h2>
<p>Paragraph này bold (đứng ngay sau h2)</p>
<p>Paragraph này bình thường</p>

/* Chọn TẤT CẢ thẻ p đứng sau h2 */
h2 ~ p {
  color: gray;
}

<h2>Tiêu đề</h2>
<p>Paragraph 1 - màu xám</p>
<p>Paragraph 2 - màu xám</p>
<p>Paragraph 3 - màu xám</p>

/* Cách viết dài */
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }

/* Cách viết ngắn gọn */
h1, h2, h3 {
  color: blue;
}

.button, .link, #submit {
  cursor: pointer;
}

/* Chọn tất cả thẻ có attribute "title" */
[title] {
  border-bottom: 1px dotted;
}

/* Chọn tất cả input có attribute "required" */
input[required] {
  border: 2px solid red;
}

/* Chọn input có type="text" */
input[type="text"] {
  background: lightyellow;
}

/* Chọn link có target="_blank" */
a[target="_blank"] {
  color: red;
}

/* Chọn link bắt đầu bằng "https://" */
a[href^="https://"] {
  color: green;
}

/* Chọn class bắt đầu bằng "btn-" */
[class^="btn-"] {
  padding: 10px 20px;
}

/* Chọn link kết thúc bằng ".pdf" */
a[href$=".pdf"] {
  background: url('pdf-icon.png') no-repeat;
  padding-left: 20px;
}

/* Chọn ảnh định dạng .jpg */
img[src$=".jpg"] {
  border: 2px solid blue;
}

/* Chọn link chứa "google" */
a[href*="google"] {
  color: #4285f4;
}

/* Chọn class chứa "primary" */
[class*="primary"] {
  background: blue;
}

/* Link chưa được visit */
a:link {
  color: blue;
}

/* Link đã được visit */
a:visited {
  color: purple;
}

/* Khi hover chuột lên link */
a:hover {
  color: red;
  text-decoration: underline;
}

/* Khi đang click (active) */
a:active {
  color: orange;
}

/* Input đang được focus */
input:focus {
  border: 2px solid blue;
  outline: none;
}

/* Input bị disabled */
input:disabled {
  background: #e0e0e0;
  cursor: not-allowed;
}

/* Checkbox được check */
input:checked {
  accent-color: green;
}

/* Element đầu tiên */
li:first-child {
  font-weight: bold;
}

/* Element cuối cùng */
li:last-child {
  border-bottom: none;
}

/* Element thứ 3 */
li:nth-child(3) {
  color: red;
}

/* Các element chẵn (2, 4, 6...) */
li:nth-child(even) {
  background: #f0f0f0;
}

/* Các element lẻ (1, 3, 5...) */
li:nth-child(odd) {
  background: white;
}

/* Element không có class="special" */
p:not(.special) {
  color: gray;
}

/* Div rỗng (không có nội dung) */
div:empty {
  display: none;
}

/* Element duy nhất con của parent */
p:only-child {
  text-align: center;
}