Jump to content
davej

* Selector?

Recommended Posts

I see page examples that include something like...

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    border: 0 none;    font: inherit;    margin: 0;    padding: 0;    vertical-align: baseline;}

...and I wonder why the * selector isn't used instead?

 

Also what is the html selector?

Edited by davej

Share this post


Link to post
Share on other sites

The <html> element is the outermost container of the document.

 

People who don't use the * selector are probably using recommended practises from a few years ago when Internet Explorer 6 (and maybe 7) didn't support the * selector. I don't use the * selector, myself, generally I can do with setting the elements myself, mainly html, body, p, h1-6, ul and ol.

Share this post


Link to post
Share on other sites

The <html> element is the outermost container of the document.

 

I always thought that body was the outermost container of the document? What elements can be considered to be outside the body?

 

Thanks

Share this post


Link to post
Share on other sites

The root element of the entire document is the <html> element.

 

The <!DOCTYPE html> syntax is that way because in the doctype declaration you have to tell the DTD parser which is the root element.

 

If you look at the most basic valid HTML document structure it's like this:

<!DOCTYPE html>

<html>

<head><title></title></head>

<body></body>

</html>

Share this post


Link to post
Share on other sites

I guess I would think that all html tags and thus all elements are going to be inside the body, but somehow that doesn't seem to be true.

Share this post


Link to post
Share on other sites

Just looking at the source code of any HTML document you'll find that the root element is the <html> element. Most tags are inside the body, but some aren't. The <html>, <head>, <meta>, <title> and <link> elements are not permitted in the body. <script> is often in the <head> section rather than the body as well.

 

Styling the <html> element is available all the way back to Internet Explorer 6 and the oldest versions I've seen of Firefox and Chrome.

Share this post


Link to post
Share on other sites

The <html>, <head>, <meta>, <title> and <link> elements are not permitted in the body. <script> is often in the <head> section rather than the body as well.

 

Well, I've never had any luck styling a title, and I can't see why you would ever style a head, meta, or link.

Share this post


Link to post
Share on other sites

Yes, they're mostly not stylable (the <head> element can actually be given style in modern browsers and versions of Internet Explorer from 8 and up) but I'm just saying that not everything is inside the <body> element. The <html> element is a parent of the <body>.

Share this post


Link to post
Share on other sites

The <html> is the outermost container you can style, the second is the <body> and child html elements within it, you are not able style anything in the <head>, as everything in the <head> except the <title> (yet) is not viewable, so what's the point.

 

the <html> is mostly used when you require a sticky footer, where you require the whole page to be 100% height to fill the screen by default, so the footer will be be at the bottom of screen until content forces beyond the browser screen area.

Share this post


Link to post
Share on other sites

Yes, that is what I saw done. The html was given a height: 100% and this worked. Styling the body to height: 100% did not have any effect.

Share this post


Link to post
Share on other sites

The sticky footer requires, html, body set to 100% height, then a child container inside the body set to min-height: 100%;, the footer OUTSIDE and below this, with a minus margin top set to the same height as footer itself. If you just have footer inside 100% height body and html it will just remain at top of body untill something forces it down to bottom of 100% height of body.

Share this post


Link to post
Share on other sites

Hmmm. I've never messed with negative margins. I guess the "sticky footer" is perhaps a slight improvement for some people. Maybe if you have a huge monitor.

Share this post


Link to post
Share on other sites

My display at home is 1080px high. According to W3Counter, almost 20% of displays are in that range, and they're bound to get more common

 

Seeing a footer in the middle of my screen always looks incredibly dumb to me.

Share this post


Link to post
Share on other sites

Oops. I was seeing some strange results but then I noticed my file was messed up.

Edited by davej

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...