CSS - 6 [pseudo selectors, attribute selectors]

pseudo selectors

 

- element를 세부적으로 지칭할 때 사용한다.

  tag: 요소 { 
} 

tag: last-child{
}

- 와 같은 형태로 사용하게 되며 그중 last-child는 여러 태그들중 가장 마지막의 태그를 지정한다.

- html코드는 건들지 않고 css 코드 안에서 태그의 css를 바꿀수 있으므로 id, class 따위보다

위와 같은 방법이 훨씬 나은 방법이다.

 

tag : nth-child(숫자){
}

- 해당 숫자 번째의 태그를 지정한다.

- nth-child(even) : 짝수 번째 태그만 지정한다.

- nth-child(odd) : 홀수 번째 태그만 지정한다.

- nth-child(3n) : 3의 배수번쨰 태그만 지정한다.

- nth-child(2n + 1) : 2n + 1번째 태그만 지정한다.

 

부모 안에 있는 자식 element를 특정하기

부모tag 자식tag {

}

- 우와 같은 형태로 자식 tag를 특정지울수 있으며 위와 같이 p라는 부모 블럭 안의 span이라는 자식이 특정지어져 

배경색이 토마토 색이 되었다.

- 단지 2단계로만 특정지어지는 것은 아니다.

- 부모아래 있는 모든 자식tag에게 전부 적용이된다.

예)

 <div>

      <span>gello</span>

      <p>아무노래나 틀어 버렷<span>gello</span></p>

</div>

이경우에

div span{

} 은 div아래 모든 span에 적용된다.

조부모tag 부모tag 자식 tag{

}

- 위형태와 같이 부모계층이 많아도 그아래로 특정이 가능하다.

 

바로 밑 자식element에만 적용되도록 하는 pseudo

tag > tag {

}

div > span {

}

- 우와 같이 '>'표시는 부모의 직접적으로 아래 있는 span만을 특정한다.

- div 밑의 자식 span들은 모두 underline이 그려졌다.

태그 바로 다음에 오는 태그를 특정하기

tag + tag {

}

p + span {

}
- 를 사용하여 p다음에 오는 span의 배경색을 토마토로 바꾸었다.

- div 밑의 자식 span들은 모두 underline이 그려졌다.

- 하지만 p다음에 span이 오지 않고 다른 tag가 오게되면 효과는 사라진다.

 

태그 바로 다음에 오지 않아도 이후에 오는 태그를 특정하기

tag ~ tag{

}

p ~ span{
}

- tag + tag는 tag 바로다음에 tag가 와야 했는데 '~' 연산자는 span이 p바로다음에 오지 않고

<a></a> 뒤에 왔는데도 span을 특정지었다.

 

Attribute selectors

tag:required{
}

- input창을 두개 만들고 password 부분에만 required 옵션을 붙였다.

-> 두개 인풋창중 required만 붙은 input창에 selector가 적용되었다.

 

tag:optional{
}

- required가 붙지 않은 input창에 selector가 적용되었다.

- 물론 위코드는 반복되는 경우가 많기 때문에 그냥

input{
}

input:required{

}

만해도 같은결과가 나온다.

 

tag[attribute = 'value'] {

}

input[type = 'password']{
}

- input중에 타입이 password인 것을 특정하였다.

- 즉 위 타입은 attribute를 통해 element를 특정할 수 있다.

- 물론 type뿐 만이 아니라

input[placehorder = 'username']{}

위 코드도 가능하다.

 

tag[attribute~= 'value'] {

}

- '~=' : 무엇을 포함하고 있는 

input[placehorder~= 'name']{}

- input 중에 placehorder에 name이 포함되어 있는 것을 특정한다.

 

::placehorder

tag::placehorder{

}

- placehorder을 꾸밀때 사용한다.

::selection

tag::selection{
}

- 텍스트를 드래그 했을 때의 변형을 줄 수 있다.

 

::first-letter

-첫 번째 글자를 변형 가능하다.

 

 

developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자

위 mdn 사이트에 들어가면 attribute selector에 대해 다양하게 검색가능하다.