[CSS] 타겟은 분명히 같은데 어떤건 되고 어떤 건 안될 때(우선순위)

아래 사진은 HTML의 구조이다(다는 아니지만)

내가 타겟을 잡고자 하는 부분은 article부분이었다.

HTML의 구조

 

처음에 아래처럼 article의 타겟을 잡았는데 이상하게 backgound-color는 되는데 border가 먹히질 않았다.

(아니, background-color 가 된다는 건 해당 부분에 해당 스타일이 적용된 거 아닌가? 근데 하나는 되는데 하나는 안된다고?)

article태그에 class속성을 줘서 타겟을 잡음

 

한참을 고민한 끝에 선택자를 좀 다르게 해봤다(위랑 다른 건 선택자의 구조뿐 - 둘 다 article태그를 잡은 건 같음)

그랬더니 이건 실행이 됐다.

구조 선택자를 이용해서 타겟을 잡음

원인은 article의 기본 설정을 위해 잡은 타겟에 있었다.

여기서 기본 article태그가 #content(#이 붙는 건 id속성을 선택하겠다는 의미)이하 구조선택자로 잡혔기 때문에

class선택자보다 더 상위 우선순위를 갖게 되기 때문이었다(우선순위가 id선택자 > class선택자)

article기본 설정을 위해 잡았던 타겟구조

 

혹시 비슷한 문제에 직면했다면 우선순위를 먼저 확인해보자!