PDA

View Full Version : Popup image viewer - class questions



dorichcss
03-25-2008, 03:13 AM
1) Script Title:
CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem:
Having only rudimentary knowledge of CSS I wondered why some of the class definition have more than one term before the brackets. For instance
".thumbnail span{..."
".thumbnail span img{..."
".thumbnail:hover span{..."

I understand the addition of the pseudo class ":hover" but why are the other terms used?
I did some searching around and couldn't find an explanation.

Hopefully someone could provide an explanation or point me to a location where I could find a description.

Thx

rangana
03-25-2008, 05:10 AM
I'm not good at explaining things, not unless you'll be satisfied :)


.thumbnail span

This means that an element having a class thumbnail, we will specify the element that has the span tag, and have some CSS declaration ;)


.thumbnail span img

This means that an element having a class thumbnail, we will specify the element that has the img tag inside the span tag, and have some CSS declaration.

dorichcss
03-25-2008, 03:07 PM
I'm not good at explaining things, not unless you'll be satisfied :)

This means that an element having a class thumbnail, we will specify the element that has the span tag, and have some CSS declaration ;)

This means that an element having a class thumbnail, we will specify the element that has the img tag inside the span tag, and have some CSS declaration.

Thanks for your response.

One additional question if I may:

Does this only apply to the "span" tag because of its unique nature or are there other tags that could be used this way. For instance could I write something like:
".someclassname h1{....}"
This is a nonsense example but I'm just trying to understand how wide spread this approach could be.

Thanks again, I appreciate the help.
RB

ddadmin
03-25-2008, 07:16 PM
It's easier just to explain all of this using its technical term, which is CSS Specificity. Take a look at the below link for example for more info:

http://www.htmldog.com/guides/cssadvanced/specificity/

Felix Riesterer
03-25-2008, 10:34 PM
For instance could I write something like:
".someclassname h1{....}"

This would mean that you have a parent element with a class name of "someclassname" which contains an element with the "h1" tag. The whole CSS rule would select the very heading within an element of the "someclassname" class name.

Possible scenarios:

<div class="someclassname">
<h1>My Heading</h1>
</div>


<body class="someclassname">
<h1>Main Heading</h1>
...
</body>

Your CSS code would select the <h1> element in each of the above scenarios in order to define some style rules for it.

Hope this helps.

Felix Riesterer.

dorichcss
03-25-2008, 11:24 PM
This would mean that you have a parent element with a class name of "someclassname" which contains an element with the "h1" tag. The whole CSS rule would select the very heading within an element of the "someclassname" class name.

Possible scenarios:

<div class="someclassname">
<h1>My Heading</h1>
</div>


<body class="someclassname">
<h1>Main Heading</h1>
...
</body>

Your CSS code would select the <h1> element in each of the above scenarios in order to define some style rules for it.

Hope this helps.

Felix Riesterer.

Thanks that confirms my understanding.

I appreciate the help.

RB