[CSS] 선택자 :: 문자열, 일반·형태 구조, 부정 , 우선순위 — 디비의 DB

문자열 속성 선택자

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

작성법	의미
선택자[속성 ~= "특정값"] { css 코드; }	띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 태그 선택
선택자[속성 \|= "특정값"] { css 코드; }	속성 값이 특정 값을 단어로 포함하는 태그 선택 + "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.
선택자[속성 \|= "특정값"] { css 코드; }	여러 속성 중 맨 앞이면서, "-" 기호가 포함된 속성 값에 "-" 기준 앞쪽 문자열이 특정 값과 같은 태그 선택
선택자[속성 ^= "특정값"] { css 코드; }	속성 값이 특정 값으로 시작하는 태그 선택
선택자[속성 $= "특정값"] { css 코드; }	속성 값이 특정 값으로 끝나는 태그 선택
*선택자[속성 = "특정값"] { css 코드; }**	속성 값이 특정 값을 포함하는 태그 선택

예제

<style>
  /*  ~= */
  div[name~="aaa"]{
  	background-color: rgb(227, 247, 199);
  }

  /* |= */
  /* "-" 기호 앞쪽의 속성값이 특정값과 일치하는 태그 선택 */
  div[class|="str"]{
    color : rgb(247, 181, 181);
    font-weight: bold;
  }

  /*  ^=  */
  div[class^="class"]{
    background-color: black;
    color : white;
  }

  /*  $=  */
  div[class$="class2"]{
    font-size:2em; /* 2em : 상위 요소 문자열의 크기의 2배 */
  }

  div[name*="2"]{
    width: 100px;
    height: 100px;
    border : 1px solid black;
  }

</style>

<div name="aaa bbb str-1" class="str-class"> div1 </div>
<div name="str-2 aaa" class="str-class"> div2 </div>
<div name="str" class="class-str"> div3 </div>
<div name="aaa str-3" class="str-class2"> div4 </div>

div1 : name에 aaa -> 그린 배경 + - 앞에 str이 동일 -> 핑크 폰트

div2 : name에 aaa -> 그린 배경 + - 앞에 str이 동일 -> 핑크 폰트 + name에 2를 포함 -> 블랙 테두리

div3 : class가 class로 시작->블랙 배경, 화이트 폰트

div4 : class2로 끝나기 때문에 font-size가 2em

언어별 표기법

java : 변수/메소드 : 카멜, 클래스: 앞글자 대문자 + 카멜
DB : 대문자 권장, 띄어쓰기는 "_"
html,css : 소문자, 띄어쓰기는 "-"

일반 구조 선택자

형제 관계에 있는 태그 중 특정 태그를 선택하는 선택자

(위치를 기준으로 구분)

작성법	의미
:first-child	형제 관계 태그 중 첫 번째 태그 선택
:last-child	형제 관계에 있는 태그 중 마지막 태그를 선택
:nth-child(수열)	형제 관계 태그 중 수열 번째 존재하는 태그를 모두 선택 (nth == n번째)
:nth-last-child(수열)	형제 관계 중 뒤에서부터 수열 번째 존재하는 모든 요소 선택

/*  :first-child */
#test1 p:first-child{
    background-color: rgb(255, 180, 180);
    color : white;
}

/* :last-child */
#test1 p:last-child{  background-color: rgb(255, 210, 128);  }

/* (해석 방식이 특이하니 주의!)
    p태그와 형제관계에 있는 요소를 모두 선택
    -> 마지막 태그를 선택 -> 해당 태그가 p태그인지 확인
*/


/* :nth-child(수열)*/
#test1 p:nth-child(2){
    /* #test1의 후손 중 p태그의 형제 요소 중 2번째 태그 선택 */
    background-color: rgb(255, 255, 139);
}

#test1 p:nth-child(2n-1){
    /* #test1의 후손 중 p태그의 형제 요소 중 2n-1번째 태그 선택, (n은 1부터 1씩증가) */
    font-size : 20px;
}

/*  :nth-last-child(수열) */
#test1 p:nth-last-child(2){
    background-color: skyblue;
}

<body>
  <div id="test1">
    <p>테스트1</p>
    <p>테스트2</p>
    <p>테스트3</p>
    <p>테스트4</p>
    <p>테스트5</p>
    <pre>테스트6</pre>
  </div>
</body>

형태 구조 선택자

형제 관계에 있는 태그 중 특정 태그를 선택하는 선택자.

(태그를 기준으로 구분)

작성법	의미
:first-of-type	형제 관계에 있는 '같은' 태그 중 첫 번째 태그를 선택
:last-of-type	형제 관계에 있는 '같은' 태그 중 마지막 태그를 선택
:nth-of-type(수열)	형제 관계에 있는 '같은' 태그 중 수열 번째 태그를 모두 선택
:nth-last-of-type(수열)	형제 관계에 있는 '같은' 태그 중 뒤에서 수열 번째 태그를 모두 선택

/* :first-of-type */
#test2 p:first-of-type{
    background-color: salmon;
}

/* :last-of-type */
#test2 p:last-of-type{
    background-color: steelblue;
}

/* :nth-of-type(수열) */
#test2 p:nth-of-type(2n){
    background-color: rgb(219, 250, 45);
}

/* :nth-last-of-type(수열) */
#test2 p:nth-last-of-type(4){
    color : rgb(128, 113, 255);
    font-weight: bold;
}

<body>
  <div id="test2">
    <p>테스트1</p>
    <p>테스트2</p>
    <p>테스트3</p>
    <p>테스트4</p>
    <p>테스트5</p>
    <pre>테스트6</pre>
  </div>
</body>

부정 선택자

형제 관계에 있는 태그 중 특정 태그를 선택하는 선택자

(위치를 기준으로 구분)

작성법	의미
:not(선택자)	괄호 내 선택자를 부정하여 반대되는 요소만 선택

#test3 > li:not(:nth-of-type(3n))  {
  background-color: rgb(255, 196, 175);
}

 <ul id="test3">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
</ul>

#test3의 자식 중 li태그 중 3의 배수가 아닌 요소 선택

작성법	의미
:only-child	특정 요소의 자식이 하나 밖에 없을때 선택
:only-of-type	특정 요소의 자식 중 같은 유형의 형제 요소가 없을 때 선택
:empty	자식이 없는 요소 선택 여기서 말하는 자식은 태그 또는 내용(문자, 띄어쓰기) 모두를 포함한다. (속성은 내용이 아니므로 미포함)
선택자, 선택자, .....	여러 선택자 동시 선택
선택자.클래스명	선택된 요소가 특정 클래스를 가지고 있을 경우 특정 요소 내부에 있는 클래스 선택하기

예제

/* :only-child */
#test1 > p:only-child{
    background-color: crimson;
}

/* :only-of-type */
#test2 > p:only-of-type{
    background-color: deeppink;
}

/* :empty */
#test3 > p:empty{
    width: 50px;
    height: 50px;
    background-color: deepskyblue;
}

/* 여러 선택자 동시 선택(선택자, 선택자, ....) */
#test4-1 , #test4-2 {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: yellow;
    border: 1px solid black;
}

/* #test5 자식 중 클래스가 cls5인 요소 선택 */
#test5 > .cls5{ background-color: aquamarine;}

/* li태그 중 클래스가 cls5인 요소 선택 */
li.cls5{ color: red;}

<!--:only-chlid  -->
<div id="test1">
  <p>테스트1</p>
  <pre>요소가 추가되었기 때문에 유일한 자식이 아니게 됨.</pre>
</div>

<!-- :only-of-type -->
<div id="test3">
  	<p></p>
	<p>내용</p>
</div>

<!-- :empty -->
<div id="test3">
  <p></p>

  <p>내용</p>
</div>

CSS 선택자 우선순위

기본적으로 css 속성은 style태그 또는 css파일에 작성된 순서(위->아래)대로 해석되지만

같은 요소에 여러 css 속성이 설정되는 경우 우선순위가 적용된다.

1순위 : !important
2순위 : inline-style 속성
3순위 : 아이디(id) 선택자
4순위 : 클래스(class) 선택자
5순위 : 태그(tag) 선택자

👉 동일한 우선순위로 css속성이 설정된 경우

-> 마지막(아랫쪽)에 작성된 css 속성이 반영된다.

👉 여러 선택자로 동일한 요소가 선택되어도

지정되는 css속성이 겹치지 않으면 모두 반영된다.

<style>
      div{ /* 태그 선택자(5순위) */
        width: 100px;
        height: 100px;
        background-color: rgb(248, 253, 181);
      }

      .cls1{ /* 클래스 선택자(4순위) */
        width: 200px;
        height: 200px;
        background-color: rgb(173, 173, 255);
      }
    
    .cls1{ 
        width: 150px;
        height: 150px;
     }
</style>

<div class="cls1">우선순위 테스트</div>

우선 순위가 같으면 마지막에 작성된 css 설정이 반영된다

지정되는 css속성이 겹치지 않으면 모두 반영된다

겹치는 속성인 width, height는 마지막에 작성된 150px, 150px이 반영되었고

background-color는 두 번째선택자에서 마지막으로 작성되었기때문에

저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML & CSS' 카테고리의 다른 글

[CSS] 레이아웃3 :: 여백(content, border, padding, margin) (0)	2021.12.03
[CSS] 레이아웃1 :: display(block \| inline \| inline-block \| none) (0)	2021.10.28
[CSS] css파일 link, 선택자(기본, 자손, 반응, 상태, 동위) (0)	2021.10.27
[CSS] 개요 , 선택자(span, id, class,*) (0)	2021.10.27
[HTML] w3school (0)	2021.10.26

티스토리툴바