이런 css첨 봅니다..
해나
#gnbulli { float:left; position:relative; }#gnbulli:hovera { background:#00bfff; color:#fff; font-size:22px; text-decoration:underline; }
.sub { width:120px; background:#000; margin:0; padding:0; list-style:none; position:absolute; left:0; top:0; -moz-transition:200ms ease; -webkit-transition:200ms ease; -ms-transition:200ms ease; -o-transition:200ms ease; }
#gnbulli:nth-of-type(2)ul { background:red; top:-160px; } #gnbulli:nth-of-type(3)ul { background:green; top:-120px; } #gnbulli:hoverul{ top:40px; }
//////////이런 css를 첨보는데 이렇게 쓰면 더 효율적인가요? 전 꺽쇠를 넣어서 하는건 첨보고.. hover 다음에 a 가 오네요..html5에만 적용되는 css인지요..특히#gnbulli:nth-of-type(3)ul nth-of-type....
-
연자두
핫! 감사합니다! ^^ ㅎㅎ
-
나샘
\ \ 는 직속자식 선택자에요
자손이라 함은 자식, 손자, 증손자 등이 전부 포함 되는 거구요
\ \ 는 바로 부모 아래 자식만, 1촌 관계만 성립이 되는 거구요
때문에 div p 하면 div 아래에 있는 모든 p 에 대해 선택되지만,
div p 하게 되면 div 바로 아래에 있는 p 만 선택되죵
div
pp/p/p
/div
요걸 두고 각각의 경우에 대한 스타일을 줘보시면 금방 이해 될거에요
:hover a 는 오버했을 때 생기는 엘리먼트가 -
자올
저도 이거 궁금했는데 감사드려요! ㅎㅎ 근데 자식과 자손의 차이가 헷깔리네요,,,ㅠㅠ;;;;;;
글구 :hover a 이렇게 오면, 오버했을때 생기는 엘리먼트의 a태그를 말하는걸로 알고있는데...
예를들어, 메뉴에서 상위메뉴 오버했을때 나타나는 서브메뉴의 a태그같은거요!
확실한지는....;;ㅎㅎ -
사라
으..감사합니다..읽어봐에 겠네요...배울게 너무 많군요..ㅠ,.ㅠ
-
꽃님이
직접 해보니까 요 블로그의 9번과 10번이 타이틀에는 형제선택자라고 잘 나와있는데 밑에 설명엔 \h1(부모)의 자식 p 를 선택함\이라 씌여있네여 오타인가봐요~ 부모자식이 아니라 h1다음에나오는 형제p를 선택하는거라네욤
-
에드워드
하핫;; 저도 재작년에 블로그 스킨 만들면서 처음 써봤었거든요 ㅋ
CSS3는 아직 공부하기 전에 썼던거라 확실히 기억하고 있었어요 ㅎㅎㅎ -
카이
+_+a 감사합니다~! 헷갈렸던건데! 역시 수다님!!
-
봄여우
nth-of-type이랑 자식 선택자도 CSS3 아니던가요~? ㅇㅅㅇa
-
돋되다
읭?? 그렇지 않아요~~ CSS2 선택자인데 ^^;;;
nth-of-type 만 CSS3 선택자ㅇ에용 -
Soeun
CSS3 선택자네요.
하위 브라우저는 호환이 안되는 단점이 ㅎㅎ
코드도 깔끔해지고 클래스를 일일이 안 만들어줘도 되고 좋더라구요~
JS로 크로스브라우징이 된다던데 제가 시도했을땐 안되서 ㅠㅠ