CSS selector

 

Selector practice : https://flukeout.github.io

 

엘리님이 강의에서 소개해주신 실렉터 연습 게임이다. 

총 32문제인데 저번에 한 번 해봤을 때는 감이 잘 안 왔는데, 한 번 더 해보니까 이해는 어느 정도 확실히 된 것 같다. 

 

 

---

이해하기

• General sibling combinator (A ~ B)
• Adjacent sibling combinator (A + B)

셀렉터 게임을 하던 중, 둘 차이가 잘 구분이 가지 않아 더 찾아봤다. 

나는 General 은 A 밑의 모든 B, Adjacent는 A 다음에 오는 B라고 해석했다. 

 

관련 링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

Youtube : Steve Griffith - Prof3ssorSt3v3

 

 

---

관련 강의 연습

    <ol>
     <li id="special">First</li>
     <li>Second</li>
    </ol>
 
    <h1 id="special">Hello</h1>
    <button>Button 1</button>
    <button>Button 2</button>
    <div class="red"></div>
    <div class="blue"></div>
    <a href="naver.com">Naver</a>
    <a href="googlenaber.com">Google</a>
    <a>Empty</a>

 

/* selector {
  property: value;
} */

*{
  color: green;
}

li {
  color: blue;
}


/* 같은 아이디인데 li만 바꾸고싶으면 앞에 li 입력한다 */

li#special {
  color: pink;
}


.red{
  width: 100px;
  height: 100px;
  background: yellow;
}


button:hover {
  color: red;
  background: beige;
}

/*속성값에 따라서*/

a[href] {
  color: purple;
}

a[href="naver.com"] {
  color: red;
}

/*naver로 시작(^)하는 것만 블루로*/

a[href^="naver"] {
  color: blue;
}

/* .com으로 끝($)나는 것만 오렌지로 */
a[href$=".com"] {
  color: orange;
}

 

 

CSS 위키피디아: https://en.wikipedia.org/wiki/Cascadi...

MDN CSS Selectors: https://developer.mozilla.org/en-US/d...

CSS Reference: https://developer.mozilla.org/en-US/d...

CSS Properties Reference: https://developer.mozilla.org/en-US/d...

 

Reference : 드림코딩 by 엘리 Youtube