Can someone help me?

Can someone tell me the differnce between the following code, besides the name of H1?

.h1 {
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
    text-align: center;
    font-size: 100px;
    color: khaki;
}

h1.test {
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
    text-align: center;
    font-size: 100px;
    color: khaki;
}

It works with the second, but not the first and I cannot for the life of me figure it out.

Hey there @puremenace!! Welcome to the forums :grinning:

It would seem the only difference is in the typing of your selectors:

.h1

h1.test

The first one, .h1, is to select a class with the name h1:

<p class="h1"> Random text </p>

While the second one, h1.test, is to select an <h1> element with a class of test:

<h1 class="test"> More random text </h1>

If the code isn’t working, and the only difference is in the selectors, I would recommend looking carefully at what selector you need.


Hopefully that helps.

Though, if it doesn’t answer your question it may be helpful if you posted your HTML formatted.
Simply press this button:

And the paste your code between the backticks:

1 Like

See and that is the issue: if I use the selector h1.test it works and if I paste the code from h1.test to h1 and then delete h1.test it works as well just by changing the class or deleting the class.

The .h1 tag selector will select all elements that have h1 as their class, and the selector h1.test will select all elements that have a parent element of h1 and have the class test.

Exactly you are correct. Let me try to elaborate,

If I was to remove the code from H1 then copy the CSS from H1.test into H1. Then in my html file get rid of the class selector… it works fine. If I leave H1 exactly like it is and get rid of the class selector and delete H1.test it doesn’t work. This is why I am trying to figure out exactly what is the difference in the css code. I copied The code from Code cademy’s finished files. So I wrote H1 and code cademy wrote H1.test. I was trying to figure out if I did something wrong.

Ok I got it 8-bit I used the .h1 instead of h1, smh.

1 Like

Not quiet accurate here. This selector chooses elements that are <h1> and have a class of test.

If you wanted to select elements that have an <h1> parent with a class of test you would do:

h1 .test {
  color: blue;
}

Notice the space between h1 and .test.
This would be blue:

<h1>
  <span class="test"> Blue text </span>
</h1>

Though this:

<h1 class="test"> Non-Blue </h1>

and this:

<h2>
  <span class="test"> Non-Blue </span>
</h2>

Would not.


Excellent @puremenace!

Usually selector errors end up somewhere along these lines.

2 Likes

Sorry, I forgot a space. Lemme edit it

1 Like