CSS: *HTML #Id_Name

CSS: *html #id_name

*html #alertBox {
    height:100px;
}

That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.

The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.

However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.

#modalContainer > #alertBox {
    position:fixed;
}

That's a child selector: it selects the alertBox when it's a direct child of modalContainer.

> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.

What's the point of writing div#id_name vs. #id_name?

This is primarily done to advance specificity and to hint the document as to what type of element #id_name is.

First, specificity:

Specificity determines which styles are actually applied to your element. The more specific you are in calling your element out, the more priority that block of properties takes over another.

For example:

Given HTML

<div id="id_name">
  Look at this blue text!
</div>

With CSS

div#id_name {
  color: red;
}
#id_name {
  color: blue;
}

Results in

This will render a div with red text as opposed to blue text. This is beneficial when writing a framework if you want to guard your styles from being arbitrarily overwritten by local styles.

Secondly, hinting:

Oftentimes, CSS is an afterthought. It's a shame, too, as it's gotten increasingly more powerful and has taken many of the responsibilities previously reserved for client-side scripting languages like JavaScript. There is no implicit inheritance in CSS, rather it's explicit via a long declaration.

What I'm talking about with this is that you don't see

div {
  .my-class {
     /* RULES! */
  }
  #my-id {
     /* RULES! */
  }
}

as a part of CSS unless you're using a precompiler like LESS or SASS. Hinting a document with the element name instead of only the id or class allows for much greater readability for not only future you, but any collaborators you may have on the project.

And finally:

Sometimes it just doesn't make sense to not add a an element guard to your rule. If I have a rule that sets things like height, width or padding, I wouldn't want that same rule applied to a span. I would rather see it fail loud than silent to prevent rules being applied that have no place being there. It can cause messy and unexpected results given the exact scenario you described.

In addition, there's no guarantee that #id-name won't be re-used on a later page for an element that is not a div in the scenario you gave. So there's that, too.

CSS: *html #id_name

*html #alertBox {
    height:100px;
}

That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.

The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.

However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.

#modalContainer > #alertBox {
    position:fixed;
}

That's a child selector: it selects the alertBox when it's a direct child of modalContainer.

> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.

Difference between two CSS selectors: why use * html?

* html is a non-standard way of targeting IE6. As html is the root tag the * selector shouldn't work but does in IE6.

Getting a link to go to a specific section on another page

I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:

<div id="timeline" name="timeline" ...>

To the old format:

<a name="timeline" />

You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.

Also, check out this similar question.

Add css to an ID in php

What you are doing can be achieved with css.

If you are in a single.php file, you should probably have a single class on your body or html tag. If not check this out.

So with this class at the top, now you can target your widget by page, single, page template etc...

.widget {
  margin-top:0;
}

 .single .widget {
   margin-top: 300px //or whatever the height of the image;
}

---

Related Topics