인프런 커뮤니티 질문&답변
작성한 질문수
hover last-child() 인식이 되지 않습니다.
작성
·
485
1
<style>
.contents{
position: relative;
padding-bottom: 50px;
z-index:9;
}
.sb_menu{
position: absolute;
margin-top:-25px;
display: table;
border-collapse: collapse;
table-layout : fixed;
width:100%;
font-size: 1.1em;
/* background-color: aqua; */
}
.sb_menu li{
display: table-cell;
border:1px solid #dcdcdc;
background-color: #fff;
border-top:none;
text-align: center;
}
.sb_menu li.on{
background-color: #2d3c47;
border-left:none;
}
.sb_menu li a{
display: block;
width:100%;
padding:17px 0;
/* border:1px solid red; */
}
.sb_menu li.on a{
color: #fff;;
}
.sb_menu li a:hover{
background-color: #2d3c47;
color: #fff;;
}
.sb_menu li a:hover:last-child(){
border-right:none;
}
</style>
<section class="contents inner">
<div class="sb_menu">
<li class="on"><a href="#" >사업개요</a></li>
<li><a href="#">브랜드소개</a></li>
<li><a href="#">오시는길</a></li>
</div>
</section>
/*****************************************/
아래 부분이 인식이 되지 않습니다.
.sb_menu li a:hover:last-child(){
border-right:none;
}
마지막 박스 에 마우스 올리면 오른쪽 줄이 나오지 않게 하려고요..
a:hover:last-child() 이렇게 사용하면 안되는건가요?
답변 2
0
jylee1715
질문자
a의 border를 찍어보니 위와 같은 소스로 적용시 a의 border 오른쪽이 없어지네요..
hover는 a의 속성으로 li의 border를 제어 하지 못하는것 같습니다.
a의 border 값으로 제어하니 잘 되네요.. 감사합니다.
0
코딩웍스(Coding Works)
지식공유자
선택자가 잘못되었어요.
a:hover:last-child() 이렇게 하시면 안되구요.
a:last-child:hover 이렇게 하셔야 해요.
그리고 first-child와 last-child는 ()가 없습니다.
만약 last-child(1)이라고 하면 마지막에 있는거 중에서 1번째...라는 뜻인데 이상하잖아요.
답변 너무 감사드려요.^^
알려주신데로 했는데도 "오시는길" 오른쪽 border가 없어지지 않습니다.
이런경우 다른 방법을 사용해야 할까요?