nth-child 문의 드립니다.
본문
html 코드
<div id="sns">
<span class="login-title">소셜 로그인</span>
<div class="header-container">
<div class="sns-icon">
<a href="#a" title="페이스북 로그인"><i class="fab fa-facebook-f"></i></a>
<a href="#a" title="트위터 로그인"><i class="fab fa-twitter"></i></a>
<a href="#a" title="구글 로그인"><i class="fab fa-google-plus-g"></i></a>
</div>
</div>
</div>
css 코드
#header #sns {margin-top:10px;}
#header #sns .login-title{ position:relative; display:inline-block; line-height:40px; color:#fff; font-family:'Nanum Gothic', sans-serif; font-size:13px; padding-left:20px;}
#header #sns .login-title:before{position:absolute; content:''; top:10px; left:10px; width:2px; height:20px; background:#9fb0c9; }
#header #sns .sns-icon{padding: 10px 20px; background:#004c92;}
#header #sns .sns-icon a{position:relative; display:inline-block; width:40px; height:40px; border:2px solid #fff; border-radius:100%; background:#fff; text-align:center; line-height:42px; margin: 0 5px; overflow:hidden;}
#header #sns .sns-icon a .fab{color:#000; font-size:20px; transition:.5s;}
#header #sns .sns-icon a:before{position:absolute; bottom:0; left:0; content:''; width:40px; height:0;transition:.5s;}
#header #sns .sns-icon a:hover:before{height:40px;}
#header #sns .sns-icon a:hover .fab {transform:rotateY(360deg); color:#fff;}
#header #sns .sns-icon a:nth-child(1):before{background:#3b5999;}
#header #sns .sns-icon a:nth-child(2):before{background:#55acee;}
#header #sns .sns-icon a:nth-child(3):before{background:#dd4b39;}
font-awesome으로 sns 로그인 버튼을 만들었습니다.
아이콘에 툴팁효과를 주고 싶어서 a 요소들을 ul > li로 감싸주었는데요.
이렇게 하니 nth-chlid:before가 적용이 안되어서요.
제가 궁금한 점은 li로 감싸주면 어떻게 css로 선택자를 주어야 할지 몰라서 질문 드립니다.
답변 1
<ul>
<li>
<a href="#a" title="페이스북 로그인"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#a" title="트위터 로그인"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#a" title="구글 로그인"><i class="fab fa-google-plus-g"></i></a>
</li>
</ul>
#header #sns .sns-icon > ul > li > a {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
border: 2px solid #fff;
border-radius: 100%;
background: #fff;
text-align: center;
line-height: 42px;
margin: 0 5px;
overflow: hidden;
}
#header #sns .sns-icon > ul > li > a .fab {
color: #000;
font-size: 20px;
transition: 0.5s;
}
#header #sns .sns-icon > ul > li > a::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 40px;
height: 0;
transition: 0.5s;
}
#header #sns .sns-icon > ul > li > a:hover::before {
height: 40px;
}
#header #sns .sns-icon > ul > li > a:hover .fab {
transform: rotateY(360deg);
color: #fff;
}
#header #sns .sns-icon > ul > li:nth-child(1) > a::before {
background: #3b5999;
}
#header #sns .sns-icon > ul > li:nth-child(2) > a::before {
background: #55acee;
}
#header #sns .sns-icon > ul > li:nth-child(3) > a::before {
background: #dd4b39;
}
:: 이 추가가 되어야 하는군요. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
