Help with CSS First problem

Get Help CSS
#1

Hello all!

I just started CSS and could not get even the first part of this code correct. It is a basic question but would love the help.

* {
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: cursive;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

.li h4 { 
  color: gold;
}

In the instructions it says:
In style.css , write a ruleset using the descendant combinator to select the <h4> elements nested in the <li> elements. Inside of the curly braces, write: [ color: gold; ]

Here is the problem:
https://www.codecademy.com/courses/learn-css/lessons/learn-css-selectors/exercises/chaining-and-specificity

1 Like
#2

Hey! I didn’t see a question in your post, but I assume you’re asking how to complete that task.
You can read about descendant combinators here:
w3 schools and here: MDN.
In your CSS you select the parent first (li) by typing it out and then select the h4 elements within it by putting a space and then typing it. so like this.

li h4 {
/*rules/declarations go here*/
}

this code block selects all h4 elements that are nested with any li elements on the webpage :slight_smile:

1 Like
#3

This makes sense.

So

li h4{
/*rules/declarations go here*/
}

will select the h4 element within the parent (li)

But what is happening when I type:

.li h4{
/*rules/declarations go here*/
}

I was unsure when to use “.parent” element or just “parent” without the period.

1 Like
#4

The dot selects a class called ‘li’. So if you have any elements with a class=‘li’ it’ll select them. You can read about those here https://www.w3schools.com/cssref/css_selectors.asp

1 Like