CSS - Style a Website by its Structure and not with a ton of classes
I'm currently writing a small website for fun and now I need to design it and I'm not really experienced in CSS. I don't want to declare a ton of classes or ids in my html file, so my question is if there is a way to avoid these within the CSS code.
Wasn't there a way to only apply CSS-declaration to children, so I can design a website by its structure.
I already tried
header article {
css-declaration;
}
and
header.article {
css-declaration;
}
but these didn't work. I also did some research, but I didn't find anything.
An example Code:
<body>
<header>
<h>Title</h>
</header>
<article>
<header>
<h>Article Title</h>
</header>
<section>
<h>Section Title</h>
</section>
</article>
</body>
article header h {
css-declaration;
}
As you can probably imagine, I only want to affect the <h> element (Article Title), which is located in a <header> within an <article>, but I don’t want to affect the <h> element (Title) in a <header>element in the <body> element as well not the <h> element (Section Title) in the <section>element.
#html #css