Topic: how to use the symbol ">" in css

hi all,

i want to move the "h2" and "#arrow" together, in my mind they are one. i can't write a arrow(--->)

i only know that the symbol ">" mean a relationship between parent-son but i can't use it .

<div class="toggle">
    <h2>move &raquo</h2><div id="arrow"></div>
    <br /></div>

css code:(i wat them to move together!)

.toggle:hover{
        cursor:pointer;
    > h2{ width:500px;
          letter-spacing:8px;
         }
   #arrow{
       margin-top:-43px;
       margin-left:40%;
       border-width:25px;
       border-color:rgba(218, 236, 244, 0.9) rgba(218, 236, 244, 0.9) rgba(218, 236, 244, 0.9) gray;
       border-style:solid;
       width:0;
       height:0;
       line-height:0;
       }
    }

the code above doesn't work ! how to improve it?

many thanks!

i am a rails rookie

Re: how to use the symbol ">" in css

maybe the :before and :after is better.

i am a rails rookie

Re: how to use the symbol ">" in css

first of all the '>' selector selects direct children of given type:

  <div id='parent'>
     <div id='child1' />
     <div id='child2'>
         <div id='child3' />
     </div>
  </div>

--- css ----
#parent > div { border: 1px solid red; }

#child1 and #child2 have red border but the #child3 doesn't, because it is direct child of #child2

I think you wanted to have something like:

<a href='#' class='toggle'>more <span>&raquo;</span></a>
--- css ---
.toggle:hover span {...}

Re: how to use the symbol ">" in css

arijith04 wrote:

In CSS selector and their differences. let me show a sample code to understand the signs.


<div id="container">
   <p>First</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>Second</p>
   <p>Third</p>
</div>

Thats mean It will target all P element which are direct children of container div, not children of child div.

Re: how to use the symbol ">" in css

Well somehow I got to read lots of articles on your blog. It’s amazing how interesting it is for me to visit you very often.  Lipozene Reviews