[thelist] bluerobot CSS

rudy r937 at interlog.com
Thu Nov 15 09:10:15 CST 2001


> view-source:http://bluerobot.com/web/layouts/layout3.css
>
> What are the > signs seen below in
>    .Content>p
>      and >p+p
>         and what does the p+p mean?
>
>.Content>p {margin:0px;}
>.Content>p+p {text-indent:30px;}

hi ron

the angle bracket means "child"

<tip type="understanding css">
get your styles explained here --
  http://gallery.theopalgroup.com/selectoracle/
</tip>

here are the explanations --

  .Content>p {margin:0px;}

      "Selects any p element that is a child of any element
       with a class attribute that contains the word Content."

  .Content>p+p {text-indent:30px;}

      "Selects any p element that immediately follows a p element
      that is a child of any element with a class attribute that contains
      the word Content."

after a while, you won't need styles translated

unless, of course, it's something like --

   html>body p.fat#rudy[align]:first-letter,a +
[class~='logo'][width|='128'][src='logo.png']:lang(en-uk)
{color:rgb(100,255,125)}

i swear i did not make that up myself; apparently it's legal css


anyhow, regarding that bluerobot page, it's a fairly good example of a
liquid three-column format, and a great example of tantek's (in)famous
"voice hack"

by the way, i contacted the author to let him know of the typos in the
style sheet in the "be nice to opera 5" rules, which should say
body>#navAlpha and body>#navBeta  instead of  body>#leftnav and
body>#rightnav


rudy






More information about the thelist mailing list