inflearn logo
강의

Course
Instructor

Flex Responsive Website Portfolio (The World's Best Cities)

hover last-child() 인식이 되지 않습니다.

562

jylee1715

3 asked

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() 이렇게 사용하면 안되는건가요?

 

hover flex last-child() 반응형-웹

Answer 2

0

jylee1715

a의 border를 찍어보니 위와 같은 소스로 적용시 a의 border 오른쪽이 없어지네요..
hover는 a의 속성으로 li의 border를 제어 하지 못하는것 같습니다.

a의 border 값으로 제어하니 잘 되네요.. 감사합니다.

0

codingworks

선택자가 잘못되었어요.

a:hover:last-child() 이렇게 하시면 안되구요.

a:last-child:hover 이렇게 하셔야 해요.

그리고 first-child와 last-child는 ()가 없습니다.

만약 last-child(1)이라고 하면 마지막에 있는거 중에서 1번째...라는 뜻인데 이상하잖아요. 

0

jylee1715

답변 너무 감사드려요.^^

알려주신데로 했는데도  "오시는길" 오른쪽 border가 없어지지 않습니다.

이런경우 다른 방법을 사용해야 할까요?

 

0

codingworks

소스코드를 다 봐야하지만 일단 급한데로 !important 사용하세요~

가로스크롤

1

459

1

상위 태그 영역 무시 하는 방법

1

843

2

반응형 적응형 구분

2

804

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

360

1

슬릭 슬라이더 버튼

1

370

1

slick 모바일로 변환했을때..

1

607

1

x scroll 이 왜 생기는 걸까요?

1

870

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

249

1

모바일에서 이미지 짤림 현상

1

2743

2

질문 있습니다

1

242

1

안녕하세요

1

259

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

289

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

387

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

407

2

slick slider 하는데 패딩이 안먹혀요

1

764

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

317

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

250

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

300

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

203

1

그 반응형 질문 있습니다

1

225

1

질문드립니다 강사님

1

289

2

flex 레이아웃 배치 질문있습니다.

1

221

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

202

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

973

1