CSS (2)

DeadWhale·2022년 4월 19일
0

CSS

목록 보기
4/9
post-thumbnail

문자열 속성 선택자

속성값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자.

  • 1) 선택자 [속성명 ~= "특정값" ]{CSS코드;}
    -> 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중
    속성 값이 특정 값을 포함하는 요소를 선택자

    여러 속성 값중 '하나' 라도 일치하면 선택
    이때 속성 값 이름이 동일 해야함

  • 2) 선택자 [속성명 |= "특정값" ]{CSS코드;}
    -> 속성 값이 특정 값을 단어로 포함하는 요소를 선택
    단 , '-'기호로 구분, "-"앞의 내용이 동일해야 한다.

이때 ' - ' (하이픈) 뒤에 str이 위치해 있음으로 3번은 적용되지 않는다.


  • 3) 선택자 [속성명 ^= "특정값" ]{CSS코드;}
    - (^ : 캐럿)
    --> 속성 값이 '특정 값'으로 시작하는 태그를 선택

  • 4) 선택자 [속성명 $= "특정값" ]{CSS코드;}
    --> 속성 값이 '특정 값'으로 끝나는 태그를 선택

  • 5) 선택자 [속성명 8= "특정값" ]{CSS코드;}
    --> 속성 값이 '특정 값'으로 포함하는 태그를 선택

일반 구조 선택자

:first-child
:last-child
:nth-child(수열)
:nth-last-child(수열)


형태 구조 선택자

  • 일반 구조 선택자와 동일하지만 같은 타입만 취급함.

:first-of-type : 같이 선택된 형제들 중에서 첫번째 요소
:last-of-type : 같이 선택된 형제들 중에서 마지막 요소
:nth-of-type(수열) : 같이 선택된 형제들 중에서 수열번째 모든 요소
:nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서부터 수열번째 모든 요소


부정 선택자

부정 선택자 ( 선택자1:not(선택자 )

~를 제외한 나머지를 선택한다

/* #test3의 자식  li 요소 중 3의 배수를 제외한 요소만 선택 */
    #test3>li:not(:nth-of-type(3n)){
    			background-color: pink;  }

0개의 댓글