[CSS] 고급 선택자, 가상 클래스

연결 선택자

• 하위 선택자 : section p { ... } 공백으로 구분한다.
• 자식 선택자 section > p { ... } 부등호로 구분한다.

• 인접 형제 선택자 : h1 + p { ... } h1 바로 밑의 근접한 p에만 적용된다. 형제들 중 첫 번째 동생 p에만 적용된다.
• 형제 선택자 : h1 ~ p { ... } h1과 인접한 모든 형제 p에 적용된다.

---

속성 선택자

지정한 속성을 가진 요소를 찾아 스타일을 적용한다.

• [속성] 선택자 ...... a [href] {background: pink}; : a 태그 중 [href]을 가진 요소에 적용한다.
• [속성=값] 선택자 a [target = "_blank"] : a 태그 중 target = "_blank"인 요소에 적용한다.
• [속성*=값] 선택자 a [href *= "google"] : a태그 중 google 단어가 있으면 적용한다.
• [속성^=값] 선택자 a [href ^= "http"] : 첫 글자가 http로 시작하면 적용한다.

• [속성$=값] 선택자 a[href $= "exe"] : 마지막 글자가 exe로 끝나면 적용한다.

/* email. tel. password에만 변화를 준다. */
#signup input[type=text], #signup input[type=password],
#signup input[type=email], #signup input[type=tel] 
{
  border: 5px dotted pink;
  border-radius: 20px;
  padding: 5px;
  width: 200px;
}

---

가상 클래스

:link, :visited

• :link : 방문하지 않은 링크에 적용한다.
• :visited : 방문한 링크에 적용한다.

• :link, :visited 사용 시 꼭 a 태그에 적용해야 한다!

• link-visited 순서대로 사용해야 한다.

• 하이퍼링크의 텍스트 색깔 상태별로 동일하게 하기

<div class="d1"><a class="test" href="http://naver.com"><b>링크 이동</b></a></div>

• .d1 .test:link, .d1 .test:visited {text-decoration: none; color: black;}
  

        .d1{
            box-shadow: 6px 11px 10px 0.5px grey;
            border-radius: 20px;
            background: beige;
            width: 200px; height: 60px;
            text-align: center;
            line-height: 60px;
		/* 정렬 */
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left:50%;top:50%;
            transform: translate(-50%, -50%);
        }
        .test:link, .test:visited{
            text-decoration: none;
            color: black;
        }

:hover, :target

• :hover : 마우스를 올릴 때 적용한다.

• :target : 앵커로 연결된 부분에 적용한다.
  
  
  • 상단의 3을 눌렀을 때 앵커로 연결된 3번 요소의 배경색이 바뀐다.
    

ul{
    list-style:none;
    /* ul 가로로 펴기 */
    display: flex;
    /* 화면 가운데 정렬 */
    justify-content: center;
    /* 텍스트 정렬 */
    align-items: center;
    text-align: center;
}
li{
    border: 1px dashed pink;
    margin:30px;
    padding: 20px;
    width: 50px;
    height: 10px;
    line-height: 10px;
}
#d1:target, #d2:target, #d3:target, #d4:target{
	background: pink;
}
a:link, a:visited{
	text-decoration: none;
    color: black;
}

<ul>
    <li><a href="#d1">1</a></li>
    <li><a href="#d2">2</a></li>
    <li><a href="#d3">3</a></li>
    <li><a href="#d4">4</a></li>
</ul>
    <div id="d1">1</div>
	<div id="d2">2</div>
    <div id="d3">3</div>
    <div id="d4">4</div>