[Back To Basic] CSS Combinators

Combinators

• Combinators 的功能是解釋 Selectors 之間關係

CSS selector

• CSS selector 可以包含一個到多個 Selectors
• 在 selector 之間，就用 Combinators 連結

四種 Combinators

• descendant selector; 符號: 空白
• child selector; 符號: >
• adjacent sibling selector; 符號: +
• general sibling selector; 符號: ~

Descendant Selector

• 指定的元素，它的所有子元素皆套用
• e.g.

div p {

  background-color: red;

}

• 所有 div 內的 p 全部套用(不管幾層)

Child Selector

• 指定的元素，它的第一層子元素皆套用
• e.g.

div>p {

  color: blue;

}

• 所有 div 內的 p 套用(只有第一層)

Adjacent Sibling Selector

• 指定的元素，和它同一層，且在它之後的第一個指定元素套用
• e.g.

div+p{

  background-color: yellow;

}

• 所有 div 後面第一個 p 套用(後面第二、三...都不套用)

General Sibling Selector

• 指定的元素，和它同一層，且在他之後的所有指定元素套用
• e.g.

div~p{

  background-color: brown;

}

• 所有 div 後面的 p 套用

source code