-1

I used a css selector to select the first child element.but it cant select the p tag's first element. here is the CSS code and the HTML code

article:first-child {
  color: white;
}

article :first-child {
  color: blue;
}
<body>
  <h1>Jane Doe</h1>
  <div class="job-title">Web Developer</div>
  <p>Far far ge ocean.</p>
  <p>1
    <article>2</article>3</p>
  <p>A small rio your mouth. </p>
  <article>
    <p>1</p>
  </article>
  <article>
    <p>1</p>
  </article>
  <article>
    <p>1</p>
  </article>
</body>

The serial number “1” become blue but the number 2 between 1 and 3 didn't has any change. It makes me confused.

Adam
  • 5,495
  • 2
  • 7
  • 24
Normed
  • 27
  • 5
  • 2
    It's semantically incorrect to place an `
    ` element inside a `

    ` element. [See here](https://stackoverflow.com/a/9852381/14776809) for a list of HTML elements you can place inside a `

    ` element

     – Sigurd Mazanti Mar 02 '23 at 10:00

2 Answers2

4

When you read an article (like in a magazine), does that contain paragraphs? Yes, makes sense to split up a wall of text into small paragraphs.

But a paragraph can't contain the article (logically). It's a series of words, it means nothing without context. You could have multiple articles with just one paragraph, but a paragraph is a part of something, not the something itself.

The reason a div does work, is because div stands for division (eg a part, an area, a section). And an area can have an article, eg 'RightSide'.

Semantics (ie what the element represents) is important in html. It helps browsers and crawlers and screenreaders etc to see what part of the site is what (eg a <aside> is not the main attraction, a <p> contains a block it text intended to be read, etc).

Maybe a helpful analogy: A tire is part of a car, a car is not part of a tire.

Martijn
  • 15,791
  • 4
  • 36
  • 68
  • but when i replace the p tag with
    , the article element turns white. the p tag and the div tag both divide the part of the website,why are thy different?
     – Normed Mar 02 '23 at 10:06
  • 1
    Why would they both exist in HTML is they were the same? The semantics of elements in HTML is the point of HTML. paragraphs and articles have specific meaning. Look them up in an English dictionary. A div is almost meaningless, it exists only to divide blocks of content up when nothing with accurate semantics exists in HTML. – Quentin Mar 02 '23 at 10:12
1

Not withstanding the semantic errors in your html as pointed out by others, the first-child selector cannot filter out other tags, quite literally the p tag has to be the first child of the parent . See here as to why. Try :first-of-type instead as per the code below. Hope this helps.

article:first-child {
  /* doesn't select anything because there are no article elements directly under any element */
  outline: 3px solid teal; 
}

article:first-of-type {
  /* this does work on the first article element in your markup */
  background-color: goldenrod; 
}

article :first-child {
  /* the space between the article and :first-child means this is the descendent selector so the first child in any article element is coloured red */
  color: red; 
}

p:first-of-type {
  /* this will select the first of the p type in any parent element*/
  box-shadow: 0px 0px 10px 3px magenta;
}

body p:first-of-type {
  /* use this to select the first p element in your markup */
  font-weight: bold;
}
<body>
  <h1>Jane Doe</h1>
  <div class="job-title">Web Developer</div>
  <p>Far far ge ocean.</p>
  <p>1<article>2</article>3</p>
  <p>A small rio your mouth. </p>
  <article>
    <p>1</p>
  </article>
  <article>
    <p>1</p>
  </article>
  <article>
    <p>1</p>
  </article>
</body>
Adam
  • 5,495
  • 2
  • 7
  • 24