Guest FirefoxRocks Posted June 19, 2009 Share Posted June 19, 2009 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 More sharing options...
Ingolme Posted June 20, 2009 Share Posted June 20, 2009 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 More sharing options...
Guest FirefoxRocks Posted June 20, 2009 Share Posted June 20, 2009 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 More sharing options...
Ingolme Posted June 20, 2009 Share Posted June 20, 2009 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 More sharing options...
sckewi Posted June 20, 2009 Share Posted June 20, 2009 Heh, I wasn't aware you could style elements in some of these ways *bookmarks page*. Thanks. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted June 21, 2009 Share Posted June 21, 2009 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). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.