Class selector "p .class" not working CSS

Question

I start to run out of ideas. I'm using flexbox inside flexboxes, and somehow even tho somewhere else on my page I use it, here I'm not able to reach "h1 .class" or "p .class".

My HTML:

                <div class="corediv">
                    <div class="coreimg">   
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                    <div class="coretext">  
                        <h1>TEXTTEXTEXT</h1>
                        <p>TEXTTEXTEXT</p>
                    </div>
                </div>

I want to select those particularly because I want to have no space between header and paragraph. Thus I tried to put margins to 0.

With following CSS:

h1 .coretext {
   margin-botton: 0px;
}

p .coretext {
   margin-top: 0px;
}

And so to ensure it wasn't managing to affect h1 and p, I also added some "color: red" and "font-size: x-large;".

But nothing seems to be able to reach thoses h1 and p.

Obviously, when I directly calls h1 or p with:

h1 {
   color: red;
}

It works.

Any insight on this? I've been trying quite everything I found online and since english isn't my native langage, I might have been taping the wrong keyword somehow, because I hardly believe I'm the first one to encounter this.

Thank you in advance for your time :)!

DannyXCII · Accepted Answer · 2020-05-16T12:25:03.757

1

A couple of issues with your current code. First of all this selector h1 .coretext will target any children of a <h1> element with the class of coretext.

There was also a typo contained in your code margin-botton - I'm not going to insult your intelligence, I'm assuming this was just a mistyped character, but it will have been causing you issues.

To target elements that are inside the element with the classcoretext you can use the following selectors:

.coretext h1 {
   margin-bottom: 0px;
}

.coretext p {
   margin-top: 0px;
}

<div class="corediv">
  
  <div class="coreimg">   
    <i class="fas fa-hand-holding-usd"></i>
  </div>
  
  <div class="coretext">  
    <h1>TEXTTEXTEXT</h1>
    <p>TEXTTEXTEXT</p>
  </div>
  
</div>

edited May 16 '20 at 12:25

answered May 16 '20 at 12:23

DannyXCII

888
4
12

Instead of spoonfeeding code to OP, please consider explaining how your code differs from OP's code (as well as links to the documentation if necessary). – Edric May 16 '20 at 12:23
2

@Edric I posted the code to help the OP and was in the process of editing to expand upon my answer. – DannyXCII May 16 '20 at 12:25
Hey @DannyXCII, thanks a lot for the quick answer! As you said, the typo in "botton" instead of bottom, comes from the fact I retyped my CSS code here to avoid copy/pasting useless informations. What I don't really get is why in another part of my css "header .nav-list" work, but here "p .coretext" doesn't work but ".coretext p" does? Is it because as you are saying the h1 and p are inside a div with that class and not directly "tagged" with that class? I found the logic of writting it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors Thanks a lot one again – Noskeal May 16 '20 at 12:35
1

@Noskeal `header .nav-list {}` will style **any** children of the `
` with the class `nav-list` - check out [this codepen](https://codepen.io/WinningWebDesign/pen/PoPymby) which should help demonstrate a little better. `h1 .coretext` will style any elements with the class `coretext` that are nested within a `
` tag.
– DannyXCII May 16 '20 at 12:53
1

@DannyXCII Thanks again, it was really a lack of knowledge on that from me. Saw it too with this thread : https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c Thanks again for your time and patience. – Noskeal May 16 '20 at 13:42

Class selector "p .class" not working CSS

1 Answers1