Member Avatar for beyermusic2

The child selector simply refers to the NEW word in the word in the center-text class.
The h2 must be singled out as child.

Here's task - Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.

Thank you!

css

body{
  background-color: #E0E0E2;
}
  h1 {
    color:#721817;
    text-align: center;
  }  

  h2 {
    color:#721817;
    font-size: 0.75em;
    text-align:center;
  } 

#center-text > h2{ 
  color: #fa9f42;
  font-size: .75em;
}
  .center-text{
    text-align:center;
  }

  #logo{
    display:block;
    margin-left:auto;
    margin-right:auto; 
  }

  #copyright {
    padding-top: 12px;
   font-size: 0.75em;
  }




html


<!DOCTYPE html>
<html>
<head>
    <title>Little Lemon</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <img src="logo.png" id="logo">
    </div>
    <div class="center-text">
        <h1>Our Menu</h1>
        <h2>Falafel <span>NEW</span></h2>
        <p>Chickpea, herbs, spices.</p>
        <h2>Pasta Salad</h2>
        <p>Pasta, vegetables, mozzarella.</p>
        <h2>Fried Calamari</h2>
        <p>Squid, buttermilk.</p>
    </div>
    <div class="center-text">
        <p id="copyright">
            Copyright Little Lemon
        </p>
    </div>
</body>
</html>

I am told it is in edit screen but now I can't find that button to edit.

Edited by beyermusic2
  • 2 Contributors
  • 2 Replies
  • 3K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for Dani

Here's task - Add a CSS rule for all span elements that are children of h2 elements that sets the text color to #FA9F42 and its font size to 0.75em.

This applies to all <span> tags that are anywhere inside <h2>. In other words, the span can appear as either a direct child or as a descendant of the h2 tag. So if you have something like: <h2><i>Blah<span>Blah</span></i></h2> then it will apply to that span, even though it is not a direct child of <h2>, but a descendant. (Since it's a child of <i> and <i> is a child of <h2>).

h2 span {
    color: #FA9F42;
    font-size: .75em;
}

On the other hand, in this case, the span is only triggered if it is a direct child of h2. It would not be triggered by my example above where the span is nested inside i.

h2 > span {
    color: #FA9F42;
    font-size: .75em;
}
Member Avatar for Dani

I think in a different forum thread you started (when you were having difficulty seeing how to reply to a topic), you wanted to apply a font size to the copyright. You can do that as so:

#copyright {
    font-size: .75em;
}

This is because copyright uses an id. If it is denoted with an id, it starts with a # in CSS. If you want to select based on a class, it starts with a . in CSS. IDs are unique per page. There can be many elements on the same page that have the same class. For tags (div, span, etc.) you don't use a . or a #. So it's just like:

span {
    ...
}

Hope this helps! Feel free to ask more questions and I'll try my best to explain.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.