how to understand the following syntax

[yaragalla_mural]

#header a:hover { color: #fff; }

how to understand the above syntax. when will this style apply and to what. in some css selector starts with "." what is the difference between selector starting with period and hash?

[papanyquiL]

The hash represents a div 'id'. For example

<div id="header"></div>

Whereas a '.' represents a class. For example

<div id="header" class="blah"></div>
or
<li class="blah"></li>

Id's and classes can reside within any HTML object (as you can see with the li tag). In the code you posted, they are targeting the hover event for a link (the a tag) that resides inside of 'header'. Whenever you hover your mouse over an 'a' tag in the 'header', it will change it's color to white (#fff).

[Kieran Y5]

When you start with a hash (#) then it can only be used as an ID (and if the HTML is valid, it can only be used once) and when it starts with a period (.) that it should be used as a class.

Example:
CSS

.aClass {
background-color: #FFFFFF;
width: 600px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

#anId {
background-color: #000000;
width: 100%;
height: 500px;
text-align: center;
color: #0000FF;
padding-top: 10px;
}

HTML

<div id="anId">
	<h2>This used an ID attribute</h2>
    <div class="aClass">
    	<h2>This used a CLASS attribute</h2>
    </div>

    <div style="height: 10px;"><span>&nbsp;</span></div>

    <div class="aClass">
    	<h2>This used a CLASS attribute (2)</h2>
    </div>
</div>

In that code example, if the ID was used again then it would make the document invalid but if you don't care about making it valid then it doesn't matter.

One more thing: JavaScript can only get an element if it has an ID, if you have 2 element with the same ID then it may cause problems.

(If something is wrong here, please tell me)

[yaragalla_mural]

does it mean if there is a child element for an element which id is header and if that element is a hyperlink then only the style hover can be applied. is my understanding right?

[Kieran Y5]

You can do:

#header a { color: #0000FF; text-decoration: none; }
#header a:hover { color: #6666FF; text-decoration: underline; }
#header a:visited { color: #1111FF; }

#header .someClassInTheId a:hover { 
color: #6666FF;
text-decoration: underline;
font-weight: bold;
}

So you understanding is a bit off (i think anyway).

[almostbob]

#header a:active {}

[macgurl70]

does it mean if there is a child element for an element which id is header and if that element is a hyperlink then only the style hover can be applied. is my understanding right?

No, you are a bit off - and I think you may be trying to get ahead of yourself a bit and that may be adding to the confusion.

When coding with CSS, you will usually have two elements within the body of the HTML page:
The divs (that contain elements)
The elements (usually contained in a div, or just in the body of the HTML)

When an individual element (such as a line of text or a graphic) is given a class or id, it is specific for that item only. None of the other items will be using that class or id since nothing else is associated with that item, nor does that item contain or control any items.

When a class or id is applied to an item such as a div or a list (the main list statement - the starting <UL>), then the conditions of that CSS statement will apply to all items WITHIN the affected statement. Once the </div> or the </ul> is reached - that will end the influence of that statement effectively.

[almostbob]

No, you are a bit off - and I think you may be trying to get ahead of yourself a bit and that may be adding to the confusion.

When coding with CSS, you will usually have two elements within the body of the HTML page:
The divs (that contain elements)
The elements (usually contained in a div, or just in the body of the HTML)

When an individual element (such as a line of text or a graphic) is given a class or id, it is specific for that item only.

error ID is specific, class is a generic that may have an unlimited number of members

None of the other items will be using that class or id

same error

since nothing else is associated with that item, nor does that item contain or control any items.

When a class or id is applied to an item such as a div or a list (the main list statement - the starting <UL>), then the conditions of that CSS statement will apply to all items WITHIN the affected statement. Once the </div> or the </ul> is reached - that will end the influence of that statement effectively.

misinformation is the most difficult thing to overcome

[macgurl70]

I am confused, I thought when you gave an individual item either a class or an ide it only affected that item. Since nothing was associated with it. With the class or id statement - I meant that when it is only associated with one item, but you are right about the fact other items can use the class element. I wanted to explain that since he was thinking of "children" in the page - there are no children to something like

<img src="picture.jpg" id="header" class="banner">

since they are only targeting that one item.

You are right to clarify that the id is a specific item. Since I use id's to specify one item only - and when I specify two as the same id I have issues. (no comments from the peanut gallery :P )

on the div's though, when you give the div an id, you can code the class for that specific div and it will control the elements in the div...

<div id="formatted">
The text here will be formatted to the div's id
</div>

But as you stated, YES, two different divs with diffrent id's can share the same class.

<div id="formattedone" class="stuff">
Text one
</div>
<div id="formattwo" class="stuff">
Text two
</div>

But, once the div is closed, that class is not being associated with the next it would go back to the body style if I remember correctly. If not - I have not had to work with that issue yet.

For the list... when you have the list with a class or id.. it will be for that list or the identified list only. It does not automatically transfer over, unless it is associated with a class or id - which is where I see what you mean. I usually don't do that and have each class or id with a specific <ul> out of habit.

Ok, I learned something new. :)

And that is the last time I post in a hurry on my way for coffee.

[macgurl70]

Okies, re-read your question, and I tried to overthink it - but the thought process was not communicated clearly.

#header a:hover { color: #fff; }

it is stating that the active link that is either given the id of "header", or that is in a <div>, or another HTML item with the id of "header" example below

<div id="header">
<a href="linkhere.html">link</a>
</div>

or

<a id="header" href="linkhere">link</a>

will change color when the visitor's pointer is over the link. I do not see many links use the id tag for this - mainly the class. As almostbob pointed out, I did not explain that correctly.

One way I can think of explaining it - and will probably get nixed again, but pftt...

When you think of a "class" in CSS think of a classroom - each individual is in that class for one specific reason. They are not the same people nor do they have the same purpose - but they are in the same CLASS and share that connection.

Each individual person has their own "id" - and there can only be one of each person in the class. When taking roll - they answer to their own individual name, with two being given the same "id" in class leading to confusion. So, you have a class that can contain several elements, including ids - but the id is an individual tag that is not shared to prevent confusion.