Q11.Combine the Universal Selector
plate 위에 놓여진 element를 전부 고르는 문제. 10번 문제와 다르게 plate 를 부모로 둔 자식 태그만을 고르는 것이다. 이러한 경우에는 해당 ' 부모명 별표 '를 적어주면 된다.여기서 주의할점은 plate와 * 사이에 space bar 을 사용해야한다는 점이다. 이를 띄워쓰지 않으면 오류가 난다.
답:plate *{
}
해설:
해설을 읽어보면 태그 뿐만 아니라 class 명도 가능하다. 만약 ul들 중 class가 fancy 인 모든 element 를 선택하고 싶다면 ul.fancy * 라고 입력해주면 된다.
Q12.Adjacent Sibling Selector
plate라는 태그 옆에 놓여진 apple 을 고르는 문제. 즉 특정 태그 다음에 나오는 태그를 선택하고 싶을 때 무엇을 사용해야하는지를 알려주는 문제이다. 이 경우에는 ' + '를 사용해주면 된다. ' A + B '인 경우 A의 다음에 나오는 B를 선택한다는 의미가 된다.
답:plate+apple{
}
해설:
해설에 따르면 11번의 문제와 같이 이 문제도 class도 선택 가능하다. 예를 들면 intro라는 class 가 있을때 ' p+.intro ' 라고 하게 되면 p 다음에 나오는 intro 라는 class 를 가진 element들이 선택된다.
Q13.General Sibling Selector
이는 12번 문제와 유사하지만 인접한 하나의 element를 고르는 것이 아닌 해당 조건에 부합하는 모든 element를 선택하는 선택자이다. 이러한 경우에는 ' + ' 가 아닌 ' ~ ' 를 사용해주면 된다.
답:bento~pickle{
}
해설:
해설에 따르면 12번 인접한 selector 문제와 유사하지만 다른 점은 하나가 아닌 다음에 나오는 모든 요소들을 선택한다는 점이 다르다.
Q14.Child Selector
이는 자식 선택자를 고르는 문제이다. 앞서 배웠던 자손 선택자는 ' 부모태그 자손태그 ' 이러한 방식으로 사용했으며 이는 부모 태그 다음에 따라오는 모든 자손태그를 선택한다. (여기서 검색하여 얻은 정보는 '부모 태그 * 자손 태그 ' 와 같이 부모 태그 다음에 전체 선택자가 올 경우 부모 태그 다음에 바로 따라오는 자식 태그는 선택되지 않고 그 다음의 자손 태그 부터 적용된다.) 하지만 자식 선택자는 부모 태그에 따라오는 자식 태그만 선택하며 그 다음의 자손 태그는 선택하지 않는다. 자식 태그는 ' > ' 라는 기호를 사용한다.
답:plate>apple{
}
해설:
바로 직접적으로 따라오는 태그가 아닌 더 깊은 태그들은 모두 자손태그 (descendant elment) 라고 부른다.
Q15.First Child Pseudo-selector
이는 부모 태그 안에 많은 자식태그가 있을 때 가장 첫번째 자식을 태그하는 방법에 대해 질문하고 있는 문제이다. 이러한 경우에는 ' :first-child ' 를 사용하면 된다. 여기서 주의할점은 ' : ' 앞에 무엇을 적어주느냐 인데 이는 내가 선택하고 싶은 태그 명을 적어주면 된다. 만약 여기서 아무것도 적지 않고 ' :first-child ' 라고 적게 되면 해당 테이블 위에 올라와있는 모든 자식태그의 첫번째가 선택된다. 우리는 orange 중에 첫번째를 고르고자 하기 때문에 orange를 앞에 적어주어야 한다.
답:orange:first-child{
}
해설:
Q16.Only Child Pseudo-selector
이는 15번 문제와 유사하지만 자식이 한명인 태그만을 고르는 문제이다. 만약 여기서 'plate :first-child ' 를 사용하게 되면 plate 위에 놓여진 2개의 orange 중 첫번째 놓여진 orange 도 선택될 수 있다. 여기서는 plate 위에 올라와있는 하나의 apple과 pickle 을 고르는 것이기 때문에 ' :only-child '를 사용해주어야한다.
하지만 여기서 주의할 점이 하나 존재한다. 답을 알기 위해 검색을 하던 도중에 알아낸 정보인데 여기서 plate다음에 바로 ' :only-child ' 라고 할 경우에는 plate라는 태그의 첫번째 자식을 말한다. 즉 15번 문제라고 생각한다면 저 선택자는 plate 가 많은데 그중에 하나의 plate만을 가진 것을 고르라는 말이 된다는 것이다. 만약 여기서 apple 과 pickle 이 각 다른 element 가 아닌 같은 apple 또는 pickle 이었다면 ' apple:only-child' 또는 ' pickle:only-child'라고 적어주면 된다. 하지만 여기선 element 가 다르기 때문에 부모 요소를 가져와야한다. 그렇기 때문에 여기서는 plate 다음에 한 칸 띄운 후 적어주어야 한다.
답:plate :only-child{
}
해설:
만약 해당 태그가 많이 쓰여져 있는 상황해서 특정 자식 태그만 선택하고 싶은 경우 부모와 자손 태그 적는 방식으로 사용해주어도 된다. 해설에 나와있듯이 예를 들면 ul안에 있는 하나만 존재하는 li 만 선택하고 싶다면 ' ul li:only- child ' 라고 적어주면 된다.
Q17.Last Child Pseudo-selector
이는 15번,16번과 유사한 문제지만 이번에는 첫번째가 아닌 마지막 자식을 선택하는 문제이다. 그리고 이 문제에서는 small 이라는 class 를 가진 요소를 골라야한다. 문제가 그뿐만이 아니다. 만약 여기서 ' .class:first-child '라고 하게 되면 세 번째 접시에 놓여진 orange 의 첫번째 요소인 small orange도 선택된다. 그렇기 때문에 이와 같은 경우에는 ' :last-child '를 사용해야한다.
답:.small:last-child{
}
해설:
해설에 따르면 16번과 같이 더 특정해주고 싶다면 ' 부모태그 자식태그:last-child ' 형태도 가능하다
Q18.Nth Child Pseudo-selector
이는 순서를 지정하여 선택하는 문제이다. 해당 문제에서는 3번째에 위치한 접시를 고르라고 한다. 이를 위해서는 ' :nth-child() ' 를 사용하며 된다.여기서 괄호() 안에 몇번째구하고 싶은지 그 수를 넣으면 된다. 예를 들어 이 문제에서는 3번째에 위치한 접시를 골라야하므로 ' :nth-child(3) ' 이라고 선택해주면 된다.앞에 plate로 특정해주어도 되지만 아무것도 안적을 경우 모든 요소 중 3번째에 해당하는 요소가 선택된다.
답: plate<생략가능>:nth-child(3){
}
해설:
해설에 따르면 ' 부모태그 자식태그:nth-child() ' 도 가능하다고 한다.
Q19.Nth Last Child Selector
이 문제는 18번과 유사한데 수를 세는 방식이 다르다. 이는 뒤에서 부터 센다. 모든 요소로 봤을 때 두 번째에 위치한 bento를 골라야하는 문제이다. 만약 18번의 방식으로 ' :nth-child(2) ' 라고 하게 될 경우 orange에게도 적용되어 두 번째에 위치한 orange가 같이 선택된다. 그렇기 때문에 여기서는 ':nth-last-child()' 를 써주면 된다. 그러나 ':nth-last-child(3)'을 하게 되면 해당 bento 뿐만 아니라 첫 번째에 위치한 oange도 같이 선택되어 진다. 그렇기 때문에 ' : ' 앞에 bento를 지정해주어야한다.
(3인 이유는 ' : ' 앞에 아무것도 적혀있지 않기 때문에 적용되는 범위가 모든 요소라고 받아들여진다. )
그렇기 때문에 고르고자 하는 bento가 뒤에서 3 번째에 위치해 있기 때문에 ' bento:nth-last-child(3)' 을 하면 된다. 이 방법 외에도 이 bento 를 선택하는 방법이 있는데 이는 ' bento:nth-child(2) '라고 입력해주어도 해당 bento 가 선택되어진다.
답:bento:nth-last-child(3){
}
또는
bento:nth-child(2){
}
해설:
Q20.First of Type Selector
이는 같은 타입인 요소들 중에 첫 번째를 고르는 문제이다. 이를 위해서는 ' :first-of-type '을 이용해주면 된다. 여기서 ' :first-of-type '이라고 입력하면 가장 첫번째에 위치한 모든 요소들이 선택된다. 즉, 적용되는 범위를 모든 요소가 되었을 경우 첫번째의 작은 orange 가 선택되고 , apple이 되었을 경우 가장 첫번째에 위치한 큰 apple이 되며, plate 가 되었을 경우 하나의 plate, 마지막으로 Orange가 되었을 경우 겹쳐진 orange 중에 첫번째 위치한 작은 orange 가 되기 때문에 이 요소들이 다 선택되는 것이다. 그렇기 때문에 어떤 type 인지 특정해주어야한다. 따라서 ' apple:first-of-type ' 이라고 입력해주면 된다.
답:apple:first-of-type{
}
해설:
