(asking for help) Why it have so specific with the selectors

HTML-CSS
1

why is it have to select .item p instead just .item? why its give differently result although .item nested the p? i’ve also tried p .item, its give the different result also.

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}
1 Like
2

hello @yonotayo0 welcome to the freecodecamp forum , but first if you have a question click it ask for help after that there are many people to help you.through the forum.freecodecamp.org.& also you can solve the problem as you can through this.
happy coding!keep it up!

1 Like
3

my bad, i will fix it. thankyou

1 Like
4

Hello!

If you select .item p —> it means you are selecting item class and its paragraph (a paragraph inside the item class, right?) or all the paragraphs inside that class.

If you select .item, without specific element after that, you are selecting all the elements inside item class or you are selecting all the item class’ elements or the class itself.

And if you select p .item —> it means you are selecting a paragraph before anything (before item class elements or something like that).

1 Like
6

Hello!

If you select .item p —> it means you are selecting item class and its paragraph (a paragraph inside the item class, right?) or all the paragraphs inside that class.

If you select .item, without specific element after that, you are selecting all the elements inside item class or you are selecting all the item class’ elements or the class itself.

And if you select p .item —> it means you are selecting a paragraph before anything (before item class elements or something like that).

(I already answered this question before this one; I copied my answer to put here)

1 Like