• 회원가입
  • 로그인
  • 구글아이디로 로그인

[selector] CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + 스티키메뉴 (Sticky Menu)

목차
  1. element+element 예제 - h1태그 바로 뒤 p요소만 선택
  2. element+element 정의
  3. element+element 구문
  4. element+element 예제 - div태그 바로 뒤 p요소만 선택
  5. element+element 예제 - 상단고정메뉴 (= Sticky Menu)
  6. element+element 예제 - 인접선택자(+) 중접 적용

 

element+element 예제 - h1태그 바로 뒤 p요소만 선택

   
<style>
h1 + p {color: red;}
</style>
 
<p>홈페이지 무료 제작 강의</p>
<h1>홈짱닷컴 (homzzang.com)</h1>
<p>HTML 무료 강의</p>
<p>CSS 무료 강의</p>
<div>
   <p>JAVA 무료 강의</p>
</div>
 

element+element 정의


지정요소 바로 뒤 인접 요소만 선택.

 


 
1. 
A + B 라고 할 경우, A 요소와 동위로 바로 뒤 인접하는 B 요소 선택.
※ (인접선택자 = 이웃선택자) 라고도 함.
 
2.
CSS버전: CSS2

 

3.

IE7 이상 주요 최신브라우저 지원.
 

 

element+element 구문

 

element + element{ css 선언; }

 

PS. + 기호 앞뒤 공백 유무 상관없음.

 

element+element 예제 - div태그 바로 뒤 p요소만 선택

 
<style>
div+p {color:red;}
</style>

<p>글 내용1</p>
<div>
    <p>글 내용2</p>
    <blockquote><p>글 인용</p></blockquote>
</div>
<p>글 내용3</p>
 
 

element+element 예제 - 상단고정메뉴 (= Sticky Menu)


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

  margin: 0;

  font-size: 28px;

  font-family: Arial, Helvetica, sans-serif;

}


.header {

  background-color: #f1f1f1;

  padding: 30px;

  text-align: center;

}


#navbar {

  overflow: hidden;

  background-color: Tomato;

}


#navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}


#navbar a:hover {

  background-color: #ddd;

  color: black;

}


#navbar a.active {

  background-color: #4CAF50;

  color: white;

}


.content {

  padding: 16px;

}


.sticky {

  position: fixed;

  top: 0;

  width: 100%;

}


.sticky + .content {

  padding-top: 60px;

}

</style>

</head>

<body>


<div class="header">

  <h2>홈짱닷컴</h2>

  <p>Homzzang.com</p>

</div>


<div id="navbar">

  <a class="active" href="javascript:void(0)">Home</a>

  <a href="javascript:void(0)">HTML</a>

  <a href="javascript:void(0)">CSS</a>

  <a href="javascript:void(0)">JS</a>

</div>


<div class="content">

  <h3>홈페이지 제작관리 + 서버관리</h3>

  <p id='demo'></demo>

</div>


<script>

window.onscroll = function() {homzzang()};


var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;


function homzzang() {

  if (window.pageYOffset >= sticky) {

    navbar.classList.add("sticky")

  } else {

    navbar.classList.remove("sticky");

  }

}

  

 var text = "";

 var i;

 for (i = 1; i <= 30; i++) {

    text += i + ". 홈짱닷컴에 놀러오세요<br>";

    document.getElementById("demo").innerHTML = text;

 }

</script>


</body>

</html>


결과보기

관련글: BS affix , http://stickyjs.com/

 

element+element 예제 - 인접선택자(+) 중접 적용

 

<style>

div+p {color:red;}

div+p+p {color:blue;}

div+p+p+p {color:green;}

</style>

 

<div>홈짱닷컴 Homzzang.com</div>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈짱닷컴 Homzzang.com</p>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
selector CSS - [attribute~=value] 속성선택자 - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요소…
selector CSS - [attribute|=value] 속성선택자 - 해당속성값 또는 뒤에 하이픈 연결된 속성값 보유 …
selector CSS - [attribute^=value] 속성선택자 ★ - 지정 속성값 문자열로 시작하는 요소. (=시…
selector CSS - [attribute$=value] 속성선택자 - 지정 속성값 문자열로 끝나는 요소 (IE7)
selector CSS - [attribute*=value] 속성선택자 - 지정 속성값 문자열 포함 모든 요소 (IE7)
selector CSS - :link 가상선택자 - 미방문링크 (= 링크선택자)
selector CSS - :visited 가상선택자 ★ -이미 방문한 링크 선택 (= 읽은글/방문글/확인글 표시 = 비지티…
selector CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자,…
selector CSS - :active 가상선택자 - 링크클릭순간 (= 액티브선택자, 링크선택자)
selector CSS - :focus 선택자 - 포커스 된 요소 선택 (= :focus선택자 = 포커스선택자) (IE8…
selector CSS - ::first-letter 가상선택자 - 요소의 첫번째글자 선택 (= ::first-letter선…
selector CSS - ::first-line 가상선택자 - 요소의 첫번째라인 선택 (= ::first-line선택자 =…
selector CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)
selector CSS - ::before 가상선택자 - 요소 앞에 내용삽입 (= ::before선택자 = 비포어선택자/비…
selector CSS - ::after 가상선택자 ★ - 요소 뒤에 내용삽입 (= ::after선택자 = 에프터선택자/애프…
selector CSS - :lang(language) 가상선택자 - 특정언어속성요소 (= 언어선택자 = 랭선택자, IE8)
intro CSS - inherit (인헤리트) - 상속개념 ★
background CSS - background 속성 ★ - 배경 일괄 (= background속성 = 백그라운드속성)
background CSS - background-color 속성 ★ - 배경색깔(=배경색상=배경컬러 = background-c…
background CSS - background-image 속성 ★ - 배경이미지 (= background-image속성 = …
2/25
목록
찾아주셔서 감사합니다. Since 2012