Creating the HTML based on CSS selectors
Demo: https://codepen.io/melnik909/pen/POLdxW
Task description
You must to write HTML code with given CSS. There will be a menu with 3 elements as a result:
Note: You don’t have to add the <body> tag in your pen on codepen.io
Solution
header.header” cascade
The very first cascade described by complex selector "header.header”. Let’s divide it into some simple parts. The browser reads selectors right to left, so we can split this to two parts: “.header” and “header”.
Selector “.header” means that browser has to find all elements having “header” class. Therefore, we can write any html tag with class=”header” attribute, for example, a div tag:
<div class="header"></div>
Next, the “header” part of our selector informs browser to select only <header> html tags among all tags with class=”header” attribute. So we need to change the <div> tag to <header>:
<header class="header"></header>
“.header nav.nav ul” cascade
Let’s split this selector to three parts: “ul”, “nav.nav” и “.header”. With “ul” we can understand that we have to add a <ul> tag. But this tag itself can't provide us enough information about where this tag should be in our code. So, we can just put it anywhere.
<header class="header"></header>
<ul></ul>
Let's look what is next. As we saw above, "nav.nav" means that here we need <nav> tag with class="nav" attribute. We can also notice a space between "nav.nav" and ul. Therefore, our <nav> should be ul's ancestor:
<header class="header"></header>
<nav class="nav">
<ul></ul>
</nav>
Also we can see another space between nav.nav and .header, so we can figure out that we have to place our <nav> tag into <header> tag:
<header class="header">
<nav class="nav">
<ul></ul>
</nav>
</header>
“.nav ul li a” cascade
Due to this selector we consider that <a> tag have to be inside <li> tag, that should be placed into <ul>, that is descendant of the some tag with class=“nav”. We exactly have one <ul> in our HTML so let’s add <li> with tag <a> inside:
<header class="header">
<nav class="nav">
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li><a href="#0">Contacts</a></li>
</ul>
</nav>
</header>
Why you need to support the project
I want to share my knowledge with you but creating posts takes a long time. Therefore I'm looking for subscribers who will financially support me. Your money will go towards the development of the HCTask project and creating my book about HTML and CSS. Together we can do it. Thank you!
PayPal: https://www.paypal.me/melnik909