CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: CSS Styling via class or id  (Read 495 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
CSS Styling via class or id
« on: 28 Jan 2020, 02:49:32 pm »
Styling HTML tags with custom CSS.

I came across a strange problem tonight with styling an H1 tag, the two listed below worked as expected:

Code: [Select]
#myStyle { /* My Style Code  */ }
Code: [Select]
h1#myStyle { /* My Style Code  */ }
Where as this one didn't:
Code: [Select]
#myStyle h1 { /* My Style Code  */ }
the HTML code was just
Code: [Select]
<h1 id="myStyle">Test</h1>
Any ideas as to what I have done wrong?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: CSS Styling via class or id
« Reply #1 on: 28 Jan 2020, 03:13:27 pm »
Ok, you need to learn "selectors and combinators". A space in CSS is the DESCENDANT combinator.

As your h1 is not a CHILD or grandchild of #mystyle, of course it doesn't work. That's what the space MEANS.

The last one you wrote would target the H1 if the markup were this:

Code: [Select]
<div id="myStyle"><h1>test</h1></div>
Because then the H1 is then a child of the DIV.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement