-1

I am not familiar with CSS and I need to target only the header elements within article elements. I know some have #, . or ,.

article header
article, header
article.header
article#header

and I think others as well.

Could someone help me, please?

MarthyM
  • 1,839
  • 2
  • 21
  • 23
user3918352
  • 31
  • 1
  • 1
  • 5

2 Answers2

7

OK, you asked for 4 selectors, let's go.

article header

Space is children selector, it means header element in article, like

<article>
    <header></header>
</article>

Header element which isn't in article won't be styled.

article, header

It styles both (all) elements which are separated by comma, it's a list of elements. It doesn't matter if they are parent&child, siblings, or nothing.

<header>...</header>
<article>...</article>
<header><article></article></header>


article.header dot is class, now you're looking for article with class="header"

<article class="header">...</article>

Element can have more classes, not just this one.

<article class="header second">...</article>


article#header

The same as above, just ID instead of class.

<article id="header">...</article>

Since id is unique identifier and in your site can't be another one with the same ID, you can write it shortly as 

#header

The difference between #header and article#header is, that #header styles all elements with this ID, not just articles. Eg. <div id="header"> will be styled too.

pavel
  • 26,538
  • 10
  • 45
  • 61
6

article header means header elements inside article elements. This is what you want.

article, header means all article elements and all header elements.

article.header means article elements with a header class.

article#header means article element with ID header.

Reference here: http://www.w3schools.com/cssref/css_selectors.asp

MarthyM
  • 1,839
  • 2
  • 21
  • 23