[CSS] Selectors

[Seletors]

• Universal *
• type Tag
• ID #id
• Class .class
• State :
• Attribute []
• 사용하기
  

  selector {
  	property: value;
  }
  
  * {
  	color: green;
  }
  
  li { /*우선순위 universal보다 높음*/
  	color: blue;
  }
  
  #special { /*id*/
  	color: pink;
  }
  
  li#special { /*li에 있는 special만*/
  	color: pink;
  }
  
  .red { /*class*/
  	width: 100px;
  	height: 100px;
  	padding: 20px; /*컨텐츠 안에 spacing*/
  	padding-top : 100px;
  	padding-right : 100px;
  	padding: 20px 20px 0px 5px; /*4 시계방향*/
  	padding : 20px 0px; /*위아래, 양옆*/
  	margin: 20px; /*컨텐츠 밖에 spacing*/
  	background: yellow;
  	border-width: 2px;
  	border-style: solid;
  	border-color: pink;
  	border : 2px dashed red; /*width, style, color이렇게 줄여서 가능*/
  }
  
  button:hover { /* hover : 마우스를 올렸을때의 액션*/
  	color: red;
  	backgroun: yellow;
  }
  
  a[href] {
  	color: purple;
  }
  
  a[href = "naver.com"] {
  	color: purple;
  }
  a[href^ = "naver"] { /*naver로 시작하는 애들만*/
  	color: purple;
  }
  a[href$ = ".com"] { /*.com으로 끝나는 애들만*/
  	color: purple;
  }​

  
  
  • selector 합성
    • 새끼 selector - 어미 element + 새끼 element
      

      /* 
      <plate>
          	<apple />
      </plate> 
      */
      
      plate apple {
      }​

    • 새끼 selector + ID selector - 더 큰 카테고리인 ID부터 선택
      

      /* 
      <plate id="fancy">
      	<pickle/>
      </plate> 
      */
      
      #fancy pickle{
      }​

    • type + class - element+class 순
      

      /* 
      <plate>
          <orange class="small"/>
      </plate> 
      */
      
      orange.small {
      }​

    • 두개이상 selector - 콤마로 구분
      

      plate, bento {
      }​

    • 특정 element 뒤에 바로 따라오는 element (붙어있는 애들) - '+' 사용
      

      /* 
      <plate/>
          <apple class="small"/>
          <plate/>
      <apple/> 
      */
      
      plate + apple{
      }​

    • 특정 element 이후로 존재하는 어떤 element 모두 - '~' 사용
      

      /* 
      <bento>
          <orange class="small"/>
      </bento>
      <pickle class="small"/>
      <pickle/>
      <plate>
          <pickle/>
      </plate>
      <plate>
          <pickle class="small">
      </plate> 
      */
      
      bento ~ pickle {
      }​

    • parent element에 속해있는 child element (사이에 뭐 없고 다이렉트로 있는거) - '>'사용
      

      /* 
      <plate>
          <apple/>
      </plate> 
      */
      
      plate > apple {
      }​

    • parent element에 있는 child element들 중 첫번째 선택 - :first-child
      

      /* 
      <plate>
          <orange/>
          <orange/>
          <orange/>
      </plate> 
      */
      
      orange:first-child {
      }​

    • parent element에 nesting 되어 있는 child elements 중 독자(only child)인 애들만 선택. - :only-child
      

      /* 
      <plate>
          <apple/>
      </plate>
      <plate>
          <pickle/>
      </plate> 
      */
      
      plate :only-child {
      }​

    • parent element에 nesting 되어 있는 child elements 중 마지막 child만 선택. - :last-child (level 17까지했음).small:last-child { }
      

      .small:last-child {
      }​

 

참고 - 유튜브 드림코딩