Notes
Styling Child and Sibling selectors
CSS & Sass
Here’s a quick run down of child and sibling selectors
>child combinator selector (direct descendant)+adjacent sibling combinator (directly after)~general sibling combinator (anywhere after as long as it’s on the same level)
the + is for adjacent sibling elements. checkbox[type='radio']:checked + label will actually select the label next to the radio input that is checked.
Specificity
1/* Block 1 */
2input[type='checkbox']:checked {
3 background: pink;
4 color: crimson;
5}
6
7/* Block 2 */
8label input[type='checkbox'] {
9 background: salmon;
10 color: plum;
11}
12
13/* Block 3 */
14label > input[type='checkbox'] {
15 background: aquamarine;
16 color: slateblue;
17}
Which style block will be applied?
The order of specificity is this:
input[type='checkbox']:checked
1p + p {
2 font-size: smaller;
3} /* Selects all paragraphs that follow another paragraph */
4#title + ul {
5 margin-top: 0;
6} /* Selects an unordered list that directly follows the element with ID title */
1/*
2Descendant selector
3will select any li inside ui
4 */
5ul li {
6 margin: 0 0 5px 0;
7}
8
9/*
10Child combination selector
11direct descendants, looks only 1 level down
12 */
13ul > li {
14 margin: 0 0 5px 0;
15}