Flexbox - confusion in how to specify which section to apply CSS to - challenge #3 (product landing)

Curriculum Help
,
1

I am on challenge number 3, the product landing page. Here is some CSS from the example:

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

#hero > h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
}

#hero  input[type='email'] {
  max-width: 275px;
  width: 100%;
  padding: 5px;
}

My question is this: How come for the h2 section the example uses the “>” sign to add CSS. But for the input section it does not. And in fact, if you try to use the “>” sign it does not work.

What’s the deal here? I know it may seem like a small thing, but learning coding is overwhelming when things don’t have any rhyme or reason to them…

Any help appreciated!

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.

source article

#hero > h2 will select any h2 element that is inside the hero element, but only if there are no layers in between.
#hero input[type='email'] will select all email inputs that are inside hero, no matter how deeply nested they are.

4

Ah, very good. Thank you