CSS : nth child , mix blend mode - quasar529/VanilaJS_projects GitHub Wiki

ν˜•μ œ μ‚¬μ΄μ—μ„œμ˜ μˆœμ„œμ— 따라 μš”μ†Œλ₯Ό 선택 EX)

/* λͺ©λ‘μ˜ 두 번째 <li> 선택 */

li:nth-child(2) {

color: lime;

}

/* μž„μ˜μ˜ κ·Έλ£Ήμ—μ„œ λ„€ λ²ˆμ§Έμ— μœ„μΉ˜ν•˜λŠ” λͺ¨λ“  μš”μ†Œ 선택 */

:nth-child(4n) {

color: lime;

}

Text-Portrait 에선 .container img:nth-child(2){ mix-blend-mode: multiply; } 둜 얼꡴에 μ”Œμ›Œμ§ˆ text νŒŒμΌμ„ μ„ νƒν•˜λŠ”λ° μ‚¬μš©

mix-blend-mode = μ–΄λŠ μš”μ†Œμ˜ μ½˜ν…μΈ κ°€ μžμ‹ μ˜ λ°°κ²½ 및 λΆ€λͺ¨μ™€ μ–΄λ–»κ²Œ ν˜Όν•©λ˜μ–΄μ•Ό ν•˜λŠ”μ§€ μ§€μ •

multiply= the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.