본문 바로가기
IT/javascript

CSS 선택자(selector)

by 허브큐 2021. 4. 29.
  • Selector (선택자)
    • property
    • value

 

  • Selector types
    • Tag selector : tag-name
    • class selector : .class-name
    • id selector : #selector-name

<!DOCTYPE html>

<html>

<head>

<style>

li {

  color:red;

  text-decoration:underline;

}

#lecture{

  font-size:20px;

}

ul li {

  color:red;

}

</style>

</head>

<body>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<ol id="lecture">

<li>HTML</li>

<li>CSS

<ol>

<li>selector</li>

<li>declaration</li>

</ol>

</li>

<li>JavaScript</li>

</ol>

</body>

</html>

 

  • Selector 상속
    • 부모와 자손 선택자

ul li {
  color:red;
}
  • 부모 자식 선택자

ul li{
  color:red;
}

#lecture>li {

  border:1px solid red;

}
  • 형제 선택자

ul, ol{
  background-color: powderblue;
}
  • 가상 클래스 선택자
    • 링크 관련 
      • :link - 방문한 적이 없는 링크
      • :visited - 방문한 적이 있는 링크
      • :hover - 마우스를 롤오버 했을 때
      • :active - 마우스를 클릭했을 때 
저작자표시 비영리 동일조건

'IT > javascript' 카테고리의 다른 글

CSS 속성(property) - font  (0) 2021.04.29

관련글

댓글

티스토리툴바