Selectors in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS_tutorial/style_five.css">
<title>Selectors in CSS</title>
</head>
<body>
<header>
<p>short paragraph inside header</p>
<h1 class="main-logo"></h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
<p>short paragraph inside header</p>
</header>
<main>
<h2>Main content of our webpage</h2>
<section class="my-articles">
<h2>Articles section</h2>
<article>
<h2>Article heading</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, possimus saepe praesentium nemo deserunt voluptate eius voluptatum quaerat commodi molestias!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic beatae adipisci praesentium alias vel quam pariatur, minus tempora optio ad!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea consequatur odit mollitia a architecto fuga dolores nulla sit itaque qui.</p>
</article>
<article>
<h2>Article heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt nemo laboriosam odit obcaecati. Dolore iusto iste repellendus optio obcaecati nam!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit ducimus perferendis a sapiente ut, magni voluptatem aut officiis ipsam recusandae?</p>
</article>
</section>
</main>
</body>
</html>
/* Below is Universal Selector denoted as "*" */
/* *{
color: blue;
} */
header{
background-color: #f0ebeb;
}
section.my-articles{
background-color: #f2e9e9;
}
header p{
color: red;
}
li a{
color: blue;
}
/* section.my-articles h2{
color: green;
} */
/* Below is direct selector for applying direct h2 */
section.my-articles > h2{
color: green;
}
section.my-articles h2+p{
color: orangered;
}
ul+p{
color: green;
}
Comments
Post a Comment