CSS Selectors
Menu CSS Selectors
 

CSS Selectors

The fundamental of working with the Document object Model is to understand Selectors and how to "select" them.

My code uses many selection methods and I am analysing them as I dissect my code. I admit that I was a little confused when I came across the Univeral Selector. The querySelectorAll()

What W3C say:

CSS selectors are used to "find" (or select) the HTML elements you want to style.

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

The Universal Selector

The following is the W3C example that makes all elements centre on screen and have the colour blue.

a Universal Selector:

<style>
* {
text-align: center;
color: blue;
}
</style>

Earlier fixes for legacy browsers

Looking back on some of the code that I was copying and trying to understand from 2011. In this case a cascading menu I found on the A List Apart website.

An example of the usage of a Universal Selector:

/* Fix IE. Hide from IE Mac \ Need to look this up on A List Apart*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

This an example of the Universal Selector. The "fix" is not now just for IE (which I hope everyone is now using a version that complies to the current standards!). The float on the ul li and the height for the ul li hyperlink tag are probably not really noticable

Having said that, the comment in the code is not particularly helpful or clear and I am not sure if the CSS "hides" are "fixes" what it claims.

The Universal Selector, * , is not obvious if you are not familiar with the CSS.

Links

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links toother websites.

The External link is disabled to on this page, please visit other pages

Unlike most genealogical research websites tempusfugit.me.uk does not attempt to get you to "sign-up" when you click on one of their links.

This Wikipedia link is disabled.

The link on Wikipedia was to:

External Links Disabled.

tempusfugit.me.uk is a non-commercial website. No payment or benefit is gained by the placement of links to other websites.

The External link is disabled to on this page, please visit other pages

Top

External Links - references

Site design by Tempusfugit Web Design -