The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> child selector, targeting elements that are a child, not grandchild
mp3909
post Apr 23 2020, 08:01 AM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
I cannot understand why a background color is being applied to the elements inside my main tag. I would have thought those elements to be in a white box.
I am using the child selector in my CSS i.e. > so it should only apply background color of #3bbced to those elements which are a child of the parent (#content).
I understand the main tag is a child but the elements inside the main tag like the p tags and h1 are not child, they are grandchildren so therefore I would have expected them to be left with a background color of #fff as specified in the body.

CODE
<html>
  <body>
          <div id="content">

            <header>Header</header>
            <main>
                <p>Hello</p>
                <h1>BLAH</h1>
                <p>RAH</p>
                <p>There</p>
            </main>
            <section>Section</section>
            <aside>Aside></aside>
            <nav>Nav</nav>
            <footer>Footer</footer>

        </div>
  </body>
</html>



CSS
CODE
body {
    color: #fff;
    font-family: 'Nunito Sembibold';
        text-align: center;
    color: black;
    }


#content > *{
            background: #3bbced;
            padding: 30px;
            border: 2px solid black;
            }


This post has been edited by mp3909: Apr 23 2020, 08:06 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 08:29 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
I don't remember the exact explanation for this. 'background-color' isn't supposed to be inherited, but it almost acts as it was. The background color of a containing element sort of shines through if no other background is set for the elements it contains.

You've also declared white as the background for BODY. If you hadn't added any other background color the whole page would be white, right? It's the same thing.

If you add 'background-color: white' in a rule for 'body *' you will get what you want without specifying it for each element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 08:31 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(mp3909 @ Apr 23 2020, 03:01 PM) *

I am using the child selector in my CSS i.e. > so it should only apply background color of #3bbced to those elements which are a child of the parent (#content).

No, color styling actually applies to any descendants (despite the child name), even grandchildren.

Oops, forgot that the OP asked about background-color.

This post has been edited by Christian J: Apr 23 2020, 08:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 08:40 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Apr 23 2020, 03:29 PM) *

The background color of a containing element sort of shines through if no other background is set for the elements it contains.

That must be it, if you position the child outside the parent it won't get the parents background-color:

CODE
main > * {background: pink;}
p {
position: fixed;
bottom: 0;
}


<main>foo
    <div>bar
        <p>baz</p>
    </div>
</main>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post Apr 23 2020, 09:04 AM
Post #5


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
Ok, so "background color" is one of those properties in CSS that is inherited
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 09:12 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
No it isn't, see my sample code above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 09:16 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
No, that's the tricky part. It isn't inherited. Somewhere there is a technical explanation for how it works but I don't find the link. But that the background color shines through is a good enough explanation, I think.

As Christian posted an example of above, the background doesn't follow if the element is positioned outside its parent - it isn't inherited.

To make it even more clear, try this. Only the part of #inner that's inside #outer, or covers #outer, however it should be seen, gets the background color - it shines through.

CODE
#outer   { width: 500px; height: 400px;
           background: blue }
#inner   { width: 400px; height: 300px;
           border: 2px solid black;
           position: relative; bottom: -200px; left: 150px }



HTML
<div id="outer">
<div id="inner"></div>
</div>



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post Apr 23 2020, 09:45 AM
Post #8


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264
thanks Pandy, very clear explanation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 11:09 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Sidenote to Christian mainly: As can be seen in the screen cap I've got around to figure out how to set the background color (the window background color) to something other than white in k-mel. It used to be easy, in alll browsers. Doubt it can be done at all in browsers like Chrome and Edge now. glare.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 03:47 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Apr 23 2020, 06:09 PM) *

Sidenote to Christian mainly: As can be seen in the screen cap I've got around to figure out how to set the background color (the window background color) to something other than white in k-mel. It used to be easy, in alll browsers. Doubt it can be done at all in browsers like Chrome and Edge now. glare.gif

Not in Vivaldi either, only Firefox seems to allow it. Not that I've ever used it myself. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 04:36 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
But it's useful! You see glitches, as if you've forgotten to specify a background color somewhere (if the desired color is white, I mean). Try it and you'll see how many sites have forgotten. tongue.gif

Netscape used to default to gray. Since then I've always wanted one browser with a gray background. Also, I don't do that so much anymore, but I used to read a lot of text in browsers, and a light gray background is easier on the eyes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 04:40 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
I just found Chrome has a config page after all. But no background changes there.

Its chrome:flags or chrome://flags/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 23 2020, 04:49 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Maybe there's some addon/extension that can do it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 23 2020, 05:54 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Doesn't matter for me. I only need one. But it's annoying how more and more options disappear.

K-mel doesn't allow me to resize text with the mousewheel anymore, not with keyboard commands either. That's reserved for page zoom. I can do it from the menu, but that's not as handy andit can take many clicks to get it right. I think most browsers don't allow you to resize only the text at all anymore. Why would one want to resize everything? Stupid. glare.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 01:18 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC