Hi there! I just wanted to know if you can still give an id to a Semantic HTML element. For example, can I do this:
Important header stuff
And if I wanted to edit this in CSS, would that mean that I can style everything under it using its id?
Hi there! I just wanted to know if you can still give an id to a Semantic HTML element. For example, can I do this:
And if I wanted to edit this in CSS, would that mean that I can style everything under it using its id?
Welcome, @rayvelarjoon35311603,
Given that we could potentially have more than one <header>
element in a single document, it would make perfect sense to isolate each one with an id
attribute, as needed.
Consider also that we could apply the id to the parent container and traverse to the header from there.
<article id="top-story">
<header></header>
<section></section>
<section></section>
<section></section>
</article>
CSS
#top-story header {
}
What if each section also has a header?
<article id="top-story">
<header></header>
<main>
<section>
<header></header>
<main></main>
</section>
<section>
<header></header>
<main></main>
</section>
<section>
<header></header>
<main></main>
</section>
</main>
<footer></footer>
</article>
The above selector will find all of these descendent elements. We can override it for our main header by one of two means…
This CSS needs to follow the above selector rule since it has the same specificity.
#top-story>header {
}
Your code example is not showing because it is not code formatted
Use the </> button to display code.
But I guess you want to know if the following is possible:
<article id="first_article></article>
Besides asking us here, why don’t you try it out? Often trial-and-error is the best way to figure out things and learn .