Selectors
CSS Selectors
Some basic CSS selectors.
Direct Child
Select UL, that is a direct child of the #directChild div.
- List Item
- List Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
- List Item
- List Item
#directChild > ul {color:teal;}:Not
Select every button except the last button.
.btn-group > .btn:not(:last-child) {color:red; background-color:#ddd;}Sibling
Select any paragraph which is preceded by a list. (Not as strict as +)
- List Item
- List Item
- List Item
- List Item
sit amet
Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
#siblingDiv ul ~ p {color: #F00;}Adjacent
Select paragraph which is immediately follows a list.
NOTE: This actually does not produce a valid result, since there is no P tag immediately after an UL (delete the Div in between to see the result).
- List Item
- List Item
- List Item
- List Item
sit amet
Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
#adjacentDiv ul + p {color: orange;}