Q21.Nth of Type Selector
짝수번째에 놓여져 있는 접시를 고르라는 문제.이는 앞서 풀어본 문제와 비슷하게 of type형태를 이용한다. 모두가 같은 type 인 접시이므로 쉽게 사용할 수 있다. 순서에 대한 선택자인 nth-of 를 사용하여 ' :nth-of-type() ' 을 써주면 된다. 다만 이 문제에서는 짝수번째를 요구하고 있기 때문에 괄호에 수가 아닌 짝수를 나타내는 even이 들어간다. 홀수를 원하는 경우에는 odd 가 들어가면 된다.
답::nth-of-type(even){
}
해설:
해설을 읽어보면 태그 뿐만 아니라 class 명도 가능하다.
Q22.Nth-of-type-Selector with Formula
이 문제는 함수식을 이용해서 3번째부터 시작한뒤 그 시작점에서 2번째에 위치한 element 를 고르는 문제이다. 2의 배수로 선택해야하며 처음 시작점이어야한다. 이를 함수식으로 나타내면 2n+3이다. 21번 문제와 동일하게 ' nth-of-type() ' 형태를 이용하는데 대신 괄호안에 함수식이 들어간다는 것에 차이가 있다.
답:plate:nth-of-type(2n+3){
}
해설:
Q23.Only of Type Selector
같은 타입의 요소들중 한개의 요소만 가지고 있는 타입을 고르는 문제. 그림을 보면 큰사과, 작은사과 각각 1개씩 올려져 있는 접시, 작은 사과 하나만 올려져 있는 접시, 피클 하나만 들어있는 접시가 있다. 같은 타입의 요소들 중 하나만 가지고 있는 요소를 선택하는 형태는 ' :only-of-type ' 인데 여기서 ' : ' 앞에 아무것도 적지 않는다면 해당 선택이 모든 요소에게 적용되기 때문에 하나만 놓여져있던 피클도 선택된다. 그렇기 때문에 사과를 특정지어주어야한다.
답:apple:only-of-type{
}
해설:
해설을 읽어보면 부모 자손 태그도 가능하다.
Q24.Last of Type Selector
23번과 유사하지만 하나만 가지고 있는 것이 아닌 여러개 중 마지막 요소를 선택하는 문제. 이는 ' :last-of-type ' 을 사용하면 된다. 하지만 이 문제에서는 피클은 해당되지 않기 때문에 사과와 오렌지에서 특정지어주어야한다. 해당 html 코드에서 사과와 오렌지의 공통점은 small 이라는 class 를 가졌다는 것이다. 따라서 클래스명을 적어 한정지어주면 된다.
답:.small:last-of-type{
}
해설:
해설을 읽어보면 부모와 자손 태그도 가능하다.
Q25.Empty Selector
아무런 자손,자식태그도 가지고 있지 않은 요소를 선택하는 문제. 여기서 주의할 점은 bento만 고르는 것인데 plate 도 자식, 자손태그를 가지고 있지 않다는 점이다. 그렇기 때문에 적용되는 대상을 bento로 한정지어주어야한다. 아무런 자식, 자손태그를 가지고 있지 않을떄 대상을 선택하는 선택자는 ' :empty ' 이다.
답:bento:empty{
}
해설:
Q26.Negation Pseudo-class
Negation 즉, 부정을 사용해서 선택자를 구하는 문제이다. 이러한 경우에는 ' not(A) ' 를 사용해주면 된다. 여기서 A는 구하고자 하는 선택자가 가지고 있지 않은 속성을 적어주면 된다. 이 문제의 경우 small 이라는 class 를 가지지 않은 큰 apple 을 고르면 되는 문제이다. 여기서 주의할 점은 ' : ' 앞에 특정지어주지 않을 경우 plate 도 함께 묶이기 때문에 apple 이라고 특정지어주어야한다.
답:apple:not(.small){
}
해설:
해설에 따르면 () 안에 id값을 사용할 수도 있으며 ' :first-child ' 와 같이 선택자를 사용할 수도 있다. 뿐만 아니라 다중 선택도 가능하다. 예를 들면 해설에 나와있는 것 처럼 () 안에 .big, .medium 을 넣어주면 big과 medium 이라는 class 를 가진 요소들을 제외한 요소들이 선택된다.
Q27.Attribute Selector
속성 선택자를 고르는 문제. 해당 문제에서는 for을 사용해서 요소들에게 속성을 부여했다. 이러한 속성을 가진 요소들을 선택하는 방법은 대괄호를 사용하는 것이다. 대괄호 안에 속성값을 적어주면 된다.
답:[for]{
}
해설:
이 문제의 경우 [for]이라고 하게 되면 for이라는 속성 값을 가진 모든 요소들이 선택된다. 해설의 예제 처럼 링크를 뜻하는 a 의 속성값인 href를 선택하고 싶으면 ' a[href] ' 이라 하면 된다. 이 경우 href 라는 속성을 가진 모든 a 태그를 선택한다는 의미가 된다. 또한 ' [type] ' 이라고 하게 되면 모든 타입의 요소들을 선택한다는 의미가 된다.
Q28.Attribute Selector
속성값을 가지고 있는 태그를 고르는데 27번 문제와 다른 점은 속성값을 가지고 있는 태그가 같은 타입이 아니라는 것이다. 27번의 경우 for 이라는 속성을 가진 모든 태그를 선택하라는 것이었다. 그래서 대괄호 안에 for 을 적어주면 됐었지만 이 문제의 경우 해당 for 이라는 속성을 가진 ' plate '만을 골라야한다. 이러한 경우에는 앞선 27번 문제의 해설 ' a[href] '와 같이 대괄호 안에 고르고자 하는 태그를 적어주면 된다.
답:plate[for]{
}
해설:
Q29.Attribute Value Selector
이 문제는 앞선 27-28번 문제와 같이 속성과 관련된 선택자 문제이다. 다만 이 문제는 속성의 특정 value 를 가진 태그를 선택하는 것이다. 이러한 경우에는 대괄호 안에 해당 속성값의 value값을 적어주면 된다. ' [속성명="value"] ' 의 형태로 말이다.
답:[for="Vitaly"]{
}
해설:
Q30.Attribute Starts With Selector
앞선 문제들과 같이 속성값을 이용하여 선택해야하는 문제이다. 하지만 이번 문제에서는 속성값의 value 가 "Sa" 시작해야한다. 이러한 경우에는 ' ^ ' 라는 것을 사용한다. 이를 이용하는 방법은 " [속성값^="찾고자하는 value값" ] " 의 형태이다.
답:[for^="Sa"]{
}
해설:
Q31.Attribute Ends With Selector
30번 문제와 매우 흡사하지만 이번에는 value 값의 앞부분이 아닌 뒷부분에 해당 내용이 들어가야 선택하는 문제이다. 이러한 경우에는 ' ^ ' 가 아닌 ' $ '형태를 쓴다. 이것의 차이일뿐 다른 것은 앞의 value 값을 찾아내는 ' ^ ' 의 형태와 같다.
답:[for$="ato"]{
}
해설:
Q32.Attribute Wildcard Selector
30번 문제의 경우 value값의 앞부분,31번 문제의 경우 value 값의 뒷부분에 찾고자 하는 내용을 입력하는 것이었다면 이번에는 어디서 시작하던지 ' obb ' 라는 value 를 가지고 있으면 선택하는 문제이다. 이 문제에서 obb라는 속성은 ' Robbie '도 해당되며 'Bobby'도 해당된다. 이러한 경우에는 모든 것을 선택하는 와일드카드인 " " 를 사용해주면 된다.
답:[for="obb"]{
}
해설:
Class Diner 은 32번 문제를 끝으로 마무리된다.
