confusing syntax: span.scrolled

[Violet_82]

Hi guys,
I wonder if you could clarify something for me. I am looking at some css examples and I have this situation here:
html:

  ...<div id="news">
    <h2>Latest News</h2>
    <p>
      Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
      <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
    </p>
    <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
  </div>...

the css:

span.scrolled {
    background-color: red;
}

#news {
  height: 100px;
    width: 300px;
    overflow-y: scroll;
}

and the script:

$(document).ready(function(){
  $('#news').scroll(function() {
    $('#header').append('<span class="scrolled">You scrolled!</span>');
  });
});

The main question is about the css. What does span.scrolled mean? I mean I can't understand this syntax. Where is that scrolled coming from? It is not referenced anywhere in the html

For the sake of clarity here's the link to the page http://antobbo.webspace.virginmedia.com/various_tests/test/chapter_03/12_scroll_event/index.html where you can see what happens when you use the scroll bar

Second question, less inportant, is about the jquery (sorry I don't want to double post in the javascript area so I keep it here). Is the scroll event part of jquery or does it need a UI interface library to work?
thanks

[pritaeas]

span.scrolled

Defines CSS properties for the span tag with class "scrolled". It is inserted in the jQuery code: <span class="scrolled">

.scroll() is a jQuery browser event.

[JorgeM]

hello,

the second question is the quickest to answer...Yes scroll is a standard jquery event. http://api.jquery.com/category/events/

First question...
What is happening here is when you move the scroll bar within the div with the ID of "news", the jquery scroll event triggers and the funtion $('#header'.append(.....) will exectute. If you look at that function, it appends the span element with a class called "scrolled" to the HTML element with an ID of "header". If we look in the CSS, it changes the background color to red.

[Violet_82]

undestood, sorry I think I didn't notice that in the script there is a span with a class of scrolled, my bad!
thanks for your help guys