เลือกว่าจะเขียน CSS ที่ตรงไหน

Selectors

Universal selectors

เลือกทุก elements

* {
    margin: 0;
    padding: 0;
}

Attribute selectors

เลือกตาม attribute ที่มีชื่อเท่ากับ "href"

a[href] {
    color: blue;
}

Class selectors

เลือกทุก elements ที่มี class เป็น "btn"

.btn {
    background-color: #f0f0f0;
}

ID selectors

เลือก element ที่มี ID เป็น "header"

#header {
    font-size: 24px;
}

Nesting selector

ตัวอย่างการใช้ & ใน SCSS

.container {
	background-color: #fff;
    /* & จะถูกแทนที่ด้วยชื่อ class ของตัวเอง (.container) */
    &.full-width {
       width: 100%;
    }
}

Elements selectors

เลือกทุก elements ที่เป็น <p>

p {
    line-height: 1.5;
}

Pseudo

Pseudo-elements

เลือก pseudo-element ของ elements <p> ที่เป็นตัวสุดท้าย

p:last-of-type::after {
   content: " - The last paragraph";
}

Pseudo-classes

เลือก elements <a> ที่อยู่ในสถานะ hover

a:hover {
   text-decoration: underline;
}

Combinators

Child combinator

เลือกทุก <li> ที่เป็นลูกของ <ul>

ul > li {
    list-style-type: none;
}

Descendant combinator

เลือกทุก <a> ที่อยู่ภายใน <div>

div a {
    color: red;
}

Next-sibling combinator

เลือกทุก <p> ที่เป็นพี่น้องของ <div>

div + p {
    margin-top: 0;
}

Subsequent-sibling combinator

เลือกทุก <p> ที่เป็นพี่น้องต่อมาของ <div>

div ~ p {
   font-style: italic;
}

Selector list

รายการเลือกตัวเลือกที่เป็น comma-separated

h1, h2, h3 {
   color: #333;
}

Subsequent-sibling combinator

เลือกทุก <p> ที่เป็นพี่น้องกับ <div> ที่มาก่อนหน้า

div ~ p { 
	font-weight: bold;
}