Selecting the child element of a parent element

https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-improved-styling-with-css/modules/wdcp-22-build-a-website-design-system-2a08b912-678e-4186-ab57-86a0fb0ca601/projects/independent-project-web-design-system

Hi,
I am working on a project and I am building the HTML5 and CSS. I am trying to select the child h2 which is the child of parent element .colors

When I try to change the font size it is not being applied. Does anyone know why?

We cannot actually see your code by following the link, can you copy and paste the relevant parts into a comment? Please ensure the code stays formatted by wrapping it in three back-ticks (or selecting ‘</> preformatted text’ from the editor tools (which is behind the gear icon for me)).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Style Guide</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
        <h1>Welcome to My Styles</h1>  
    </main>
    <div class="colors">
      <h1>The Colors</h1>
        <h2>Red</h2>
        <h3 class="red"></h3>
        <h2>Blue</h2>
        <h3 class="blue"></h3>
    </div>
    <div class="fonts">
      <h1>The Fonts</h1>
    </div>
	<script src="index.js"></script>
  </body>
  </html>
.colors {
  position: relative;
  margin: auto;
  width: 50%;
  border: 100px;
  padding:100px;
  background-color: #ECFFDC;
}

.colors h1 {
  text-align: center;
  color: #F08000;
}

.colors h1 h2 {
  font-size: 30px;
}


.red{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: red;
}

.blue{
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: blue;


Instead of .colors h1 h2 just make it .colors h2

When you do .colors h1 h2 - it tries to apply to the styles to an h2 that is a descendant of (or inside of) an h1 tag.

1 Like

Ok, yeah that does make sense.
Thanks

Especially when we consider that a heading is not likely to contain another heading. They are meant to follow each other.

<h1></h1>
<h2></h2>

as opposed to,

<h1><h2></h2></h1>

CSS-wise, space-separated combinator selectors follow inheritance.

Comma separated selector expressions are not combinators but independent criteria.

It is easy to see where confusion might arise in interpreting selectors.

2 Likes