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/cs...-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

Originally Posted by rangana

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

Originally Posted by dorichcss

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:

HTML Code:

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

HTML Code:

<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

Originally Posted by Felix Riesterer

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:

HTML Code:

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

HTML Code:

<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

Thread: Popup image viewer - class questions

Thread Tools

Search Thread

Popup image viewer - class questions

The Following User Says Thank You to Felix Riesterer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions