[HTML&CSS] Combinator, Pseudo selectors - 2

 

 

 

 

 

[HTML&CSS] Combinator, Pseudo selectors - 2

( UPDATE  2023 - 05 - 27 )

 

 

 

 

---

combinator, pseudo selectors

---

 

 

div span

div 안의 span

 

 

 

div > span

div 안의 직계 span

 

 

 

p + span

p ‘바로 다음’으로 오는 span

 

 

 

p ~ span

p ‘다음’ 으로 오는 span ( 바로 뒤에 오지 않을 때 씀)

 

 

 

input:required

input에 required 있는 경우만 적용

 

 

 

input[type=“password”]

input에 password 타입만 적용

 

 

 

input[placeholder=“username”]

placeholder가 username 인 경우만 적용

 

 

 

input[placeholder~=“name”]

placeholder에 name이 들어간 경우만 적용

 

 

 

input[placeholder$=“name”]

placeholder의 끝에 name이 들어간 경우만 적용

 

 

 

input[placeholder^=“name”]

placeholder의 처음에 name이 들어간 경우만 적용

 

 

 

 ~

span이 p의 형제인데, 바로 뒤에 오지 않을 때 쓸 수 있다.

 

 

 

Attribute selectors

특성 선택자

 

 

 

~=

name을 포함하고 있다는 의미가 되는 것이다.

 

 

 

 

 

 

 

• a[href$=".org"] → '$='는 '.org'로 끝나는 모든 anchor를 선택할 수 있다.
 
• 그냥 input과 required input이 있다면, input:required{}를 통해서, required input에만 속성을 적용시킬 수 있다.
 
• input{} 을 통해, [input 이름]에 해당하는 input 속성을 따로 줄 수 있다.
  • 여기서, input[placeholder="First name"]은 First name에만 속성을 주지만, input[placeholder~="name"]은 name이 들어가는 모든 input에 속성을 부여할 수 있다.
 
• attribute selectors를 이용하면, class를 지정할 필요 없이 CSS만으로 각각의 속성을 부여해줄 수 있다.

 

 

 

 

---

출처

---

 

노마드 코더 코코아톡 클론코딩