티스토리 뷰

728x90
반응형

하위 엘리먼트가 있는지 없는 체크할 경우가 있다.

물론 js 로 체크하는게 보통이지만....


예를 들어 마크업과 JS수정없이 아코디언 메뉴에 이미지를 추가한다고 치자.


아코디언메뉴에서 열리고 닫히는 모습을 알기 쉽게 맨 우측에 화살표를 

넣어야 하는데 하위메뉴가 없을 때는 화살표가 나오지 말아야한다.

이럴때 정말이지 난감하다.


JS코드를 안건드리고 어케!!!!!!!!!!!


특히나 JS를 만질 권한이 없다라던지 JS에서 변경하면 큰일이 난다라는.....

게다가 개발팀과 분리되어 웹퍼블리싱만 한다면 더욱이 힘들 것이다.


그럼 기존 마크업과 JS수정없이 CSS 만으로 체크할 수 있을까 ?


바로 :only-child 라는 선택자를 사용할 수 있다.


:only-child 선택자 - 부모 엘리먼트내에서 자신이 유일한 자식 엘리먼트라는 뜻.


a{position:relative;}

/*아래 after 에 내용처럼 after선택자에 위치,사이즈,이미지를 추가했다.*/
a:after{
  content:'';
  position:absolute;
  right:12px;
  top:12px;
  width:15px;
  height:20px;
  background:url(../images/ico_menu_arrow.png) 100% 50% no-repeat;
}

/*a태그가 유일한 자식 엘리먼트 일때 after선택자에 지정한 이미지를 display:none 처리*/
a:only-child:after{
    display:none;
}


마지막으로 마크업이 깔끔하면 다행인데 

텍스트 링크 말고 또 여러개의 형제 노드들이 즐비하다면 어려울 수도 있겠다..... ㅠㅠ

728x90
반응형

'Programming language > HTML & CSS' 카테고리의 다른 글

note 8 viewport  (0) 2018.12.13
뷰포트 정리  (0) 2018.12.13
모바일 토글 스타일 버튼( switch button )  (0) 2018.11.07
tooltip( 말풍선 ) CSS (2)  (0) 2018.10.17
tooltip( 말풍선 ) CSS (1)  (0) 2018.07.12
댓글