Jump to content

Order Of Things Within A Style?


Guest FirefoxRocks
 Share

Recommended Posts

Guest FirefoxRocks

The most simple selector:

* { ... }

At the very basic, it's a tag:

td { ...}

With a pseudo-class:

td:hover { ... }

With an attribute:

td[axis] { ... }

With an attribute with values:

td[axis="email"] { ... } td[axis~="email"] { ... } td[axis|="email"] { ... }

With a class or id:

td.home { ... } div#footer { ... }

With a class or id and a pseudo-class:

td.home:hover { ... } a#clsi:visited { ... }

With a class and an attribute with a defined attribute value:

td.home[axis="email"] { ... }

With a class and an attribute with a defined attribute value with a pseudo-class:

???

With a class and an attribute with a defined attribute value with a pseudo-class and a pseudo element:

???

With a class and an attribute with a defined attribute value with a pseudo-class with several pseudo-elements:

???

Can someone fill me in on those ones that I don't know?

Link to comment
Share on other sites

The most simple selector:
* { ... }

At the very basic, it's a tag:

td { ...}

With a pseudo-class:

td:hover { ... }

With an attribute:

td[axis] { ... }

With an attribute with values:

td[axis="email"] { ... } td[axis~="email"] { ... } td[axis|="email"] { ... }

With a class or id:

td.home { ... } div#footer { ... }

With a class or id and a pseudo-class:

td.home:hover { ... } a#clsi:visited { ... }

With a class and an attribute with a defined attribute value:

td.home[axis="email"] { ... }

With a class and an attribute with a defined attribute value with a pseudo-class:

???

With a class and an attribute with a defined attribute value with a pseudo-class and a pseudo element:

???

With a class and an attribute with a defined attribute value with a pseudo-class with several pseudo-elements:

???

Can someone fill me in on those ones that I don't know?

I don't know why you'd need them, but well.With a class and an attribute with a defined attribute value with a pseudo-class:
a.box[rel=next]:hover { ... }

With a class and an attribute with a defined attribute value with a pseudo-class and a pseudo element:

a.box[rel=next]:first-line:hover { ... }

With a class and an attribute with a defined attribute value with a pseudo-class with several pseudo-elements:It's not logically possibly to have several pseudo-elements because the pseudo-element doesn't have any other pseudo-elements inside it.Maybe you want several selectors:

a.box[rel=next]:first-line:hover, a.box[rel=next]:first-letter:hover { ... }

Link to comment
Share on other sites

Guest FirefoxRocks
With a class and an attribute with a defined attribute value with a pseudo-class with several pseudo-elements:It's not logically possibly to have several pseudo-elements because the pseudo-element doesn't have any other pseudo-elements inside it.Maybe you want several selectors:
a.box[rel=next]:first-line:hover, a.box[rel=next]:first-letter:hover { ... }

Sorry, I meant several pseudo-classes, so would this be right:
input#tac[type="radio"]:last-child:checked { ... }

And of course I can even throw in chained elements, so...:

html>body div#content form fieldset.legal input#tac[type="radio"]:last-child:enabled:checked { ... }

Would the order of those selectors be right? Not that I'm expecting it to work perfect in browsers though :)

Link to comment
Share on other sites

It's correct, if I'm not mistaken. But I always like to test situations I haven't tried before confirming things. I believe the child selector and the attribute selector don't work in Internet Explorer 6. I always stick to classes, IDs, element selectors and some pseudo-classes.

Link to comment
Share on other sites

Guest FirefoxRocks

I did a super quick test and it worked:SGML-conforming:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><title// <meta http-equiv=Content-Type content="text/html;charset=utf-8"/<style type="text/css">html>body div#content>form>fieldset.legal input#tac[type="text"]:last-child:enabled { background-color: #006; }</style><body/<div id="content"/<form action=""/<fieldset class="legal"/<legend/b/ <input type=radio> Radio<input id=tac type=text> Text///

HTML-conforming:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><title></title><meta http-equiv=Content-Type content="text/html;charset=utf-8"><style type="text/css">html>body div#content>form>fieldset.legal input#tac[type="text"]:last-child:enabled { background-color: #006; }</style><body><div id=content><form action=""><fieldset class=legal><legend>b</legend><input type=radio> Radio<input id=tac type=text> Text</fieldset></form></div>

Both of them are valid HTML and both apply the CSS correctly in supported browsers (Firefox, Opera, Google Chrome).

Edited by FirefoxRocks
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...