11 Replies - 554 Views - Last Post: 28 December 2017 - 12:49 AM

#1 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Understanding * selectors

Posted 20 December 2017 - 07:20 PM

Please refer to
https://www.w3school...me=FMO76RBSAGUJ

<body>
hi
<h1>Hello</h1>
<div>
<p>World!</p>
</div>
</body>


I was thinking html>* (or html>body more specifically) would affect body non-recursively (only 'hi' will be affected and not"Hello" or "World!", because it would mean direct child of html and not inner tags.

But the result I get is all the letters are red. I would expect "hi" would be red and "Hello" and "World!" would not be affected.

thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Understanding * selectors

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1502
  • View blog
  • Posts: 8,239
  • Joined: 07-September 06

Re: Understanding * selectors

Posted 20 December 2017 - 07:44 PM

So, the way that CSS works is you select an element or elements you want to apply a style to, then you specify the style and go on with life. Children of elements that have a style applied to them, unless they have the same style overwritten for themselves, will inherit stiles from their parents. In this case, h1, p, and div don't have color set for them, so they inherit the style from their parent (in this case body). That is why you are getting all red text.

If you open up developer mode in your web browser and inspect the elements you should be able to see this in the works. For example, in Chrome, it actually has a section that says "inherited from body" on the h1 tag, and sure enough color is inherited.

Hopefully that makes sense.
Was This Post Helpful? 0
  • +
  • -

#3 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 20 December 2017 - 07:57 PM

View PostBetaWar, on 20 December 2017 - 07:44 PM, said:

So, the way that CSS works is you select an element or elements you want to apply a style to, then you specify the style and go on with life. Children of elements that have a style applied to them, unless they have the same style overwritten for themselves, will inherit stiles from their parents. In this case, h1, p, and div don't have color set for them, so they inherit the style from their parent (in this case body). That is why you are getting all red text.

If you open up developer mode in your web browser and inspect the elements you should be able to see this in the works. For example, in Chrome, it actually has a section that says "inherited from body" on the h1 tag, and sure enough color is inherited.

Hopefully that makes sense.


Thank you betaWar. I get it now...
An example to illustrate this here
https://www.w3school...me=FMO8CJK8A5AG
Was This Post Helpful? 0
  • +
  • -

#4 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 20 December 2017 - 08:08 PM

Please refer to
https://www.w3school...me=FMO8O5K6P1UH

I have style

<style>
* {
   color: red;
}
body>div {
   color: green;
}
body {
   color: blue;
}
</style>


I would expect "World!" to be green but it is red.

thanks
Was This Post Helpful? 0
  • +
  • -

#5 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 20 December 2017 - 08:58 PM

Here
https://meyerweb.com...ev/200006a.html

it says universal selector "circumvents inheritance".

But here
https://www.w3school...me=FMO05W20J1RC

"World!" is blue.
Was This Post Helpful? 0
  • +
  • -

#6 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1502
  • View blog
  • Posts: 8,239
  • Joined: 07-September 06

Re: Understanding * selectors

Posted 20 December 2017 - 10:37 PM

Okay, with your 2nd post (above), "World" is red because it is contained within a p tag, which matches with the wildcard (*) rule.

The div is still displaying green text, but the paragraph has a different style. Example:
<html>
<head>
<style>
* {
   color: red;
}
body>div {
   color: green;
}
body {
   color: blue;
}
</style>
</head>
<body>
hi
<h1>Hello</h1>
<div>
This is more text.
<p>World!</p>
</div>
</body>
</html>



With your previous post, the universal selector (wildcard) does (as far as I know) circumvent inheritance, however CSS also uses "specificity" to determine styles, and in this case div p is more specific than * * * * because it has a more specific number of elements that are capable of matching the selector.
Was This Post Helpful? 0
  • +
  • -

#7 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 21 December 2017 - 06:40 PM

thanks man!
Was This Post Helpful? 0
  • +
  • -

#8 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 21 December 2017 - 06:46 PM

Sorry another problem....

<html>
<head>
<style>
* * * * {
   color: red;
}
div p {
	color: blue;
}
</style>
</head>
<body>
hi
<h1>Hello</h1>
<div>
<p>World! <span>g-unit</span></p>
</div>
</body>
</html>

This gives g-unit color red as expected.

But...

https://www.w3school...me=FMPAY2C6FGY2

<html>
<head>
<style>
* * * * {
   color: red;
}
div p {
	color: blue;
}
</style>
</head>
<body>
hi
<h1>Hello</h1>
<div>
<p>World! <p>g-unit</p></p>
</div>
</body>
</html>




The above gives g-unit color blue?

thanks
Was This Post Helpful? 0
  • +
  • -

#9 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1502
  • View blog
  • Posts: 8,239
  • Joined: 07-September 06

Re: Understanding * selectors

Posted 22 December 2017 - 08:42 AM

The second still makes sense to me since div p just says find all paragraphs that are descendants of divs.

However, if you want to find one that I personally believe to be an error (or maybe I just don't understand the CSS enough to get why):
<html>
<head>
<style>
* * * * {
   color: red;
}
div > p {
	color: blue;
}
</style>
</head>
<body>
hi
<h1>Hello</h1>
<div>
<p>World! <p>g-unit</p></p>
</div>
</body>
</html>



According to the doumentation, div > p should only select paragraphs that are direct children of divs. So a paragraph that is a child of a paragraph that is a child of a div wouldn't (in my opinion) count.
Was This Post Helpful? 0
  • +
  • -

#10 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 27 December 2017 - 06:39 PM

thanks a lot BETAWAR

I wrote up some notes....
https://drive.google...xVVr_ru2q6D0RoJ

:)
Was This Post Helpful? 0
  • +
  • -

#11 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Understanding * selectors

Posted 27 December 2017 - 06:48 PM

If the link requires you to login try this
https://drive.google...iew?usp=sharing
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: Understanding * selectors

Posted 28 December 2017 - 12:49 AM

Although, reportedly, the performance of the universal selector has less impact than in the past, I would avoid its use, particularly in some of the detailed ways described. Apart from its use in a CSS reset, most other uses can be covered by a correct application of an HTML and CSS hierarchy and cascade. As we've seen, a detailed rule with a universal selector can creep in unexpectedly as the page structure is further developed.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1