INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Trying to understand complex CSS selectors

Trying to understand complex CSS selectors

(OP)
First, I am new to CSS, so any links and/or explanations must be simple for simple-minded people like me. I have searched W3C, and although they do explain class selectors, they do not come close to answering my questions. So far, I have not found anyplace else that does.

In the code below, exactly how does the RED code work? I know it has something to do with multiple selectors, but have no idea how they work together and W3C does not tell me.

CODE -->

.book {
    width: 952px;
    height: 640px;
    background-image: url(..//images/dialog/book/container.png);
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -485px;
    z-index: 1;
}

.book.building .remDataBuildingType .building .info .production ul li,
.book.building .productionTree ul li {
    line-height: 3em;
    clear: both;
    padding: 0px 0px 0px 10px;
} 

The .book function is the only function I could find in the CSS file. .building, .icon, .productionTree, etc do not exist in the CSS file.

Any simple explanation or pointers to a simple explanation are greatly appreciated.

**********

On an unrelated note, I hate this new submission text box. I can type 3 times faster than the text box can process what I type. Every 4 words or so I must wait until the text box displays what I have typed. It reminds me of when I was online with a 300 baud modem some 20 years ago - type - wait forever - type - wait forever - etc. The old submission text box display was almost instantaneous.

mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond

RE: Trying to understand complex CSS selectors

I see 'position: absolute' in your code and straight away, alarm bells start ringing. What exactly are you trying to do with that code?

The submission box is probably a victim of the latest trend in webpages where the content loads straight away and then the adverts, promo rubbish and links to sites offering a solution to falling out of bed, take an age to load. Development of the interweb is slowly going backwards.

Keith
www.studiosoft.co.uk

RE: Trying to understand complex CSS selectors

CODE

.book.building .remDataBuildingType .building .info .production ul li,
.book.building .productionTree ul li { 

Basically what that code is saying is:
Apply these stylings to

1. a li element that is inside a ul element that is inside an element with a class of .produccion that is inside an element with a class of info that is inside an element with a class of building that is inside an element with a class of .remDataBuildingType that is inside an element with the classes building and book

and to

2. a li element that is inside a ul element that is inside an element with a class of .production tree which is inside with an element with classes .book and .building.

In essence the html would look something like this:

[oode]

<div class="book building">
    <div class="remDataBuildingType">
        <div class="building">
            <div class="info">
                <div class="production">
                    <ul>
                        <li> ...</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


and

<div class="book building">
    <div class="productionTree">
        <ul>
            <li> ...</li>
        </ul>
    </div>
</div>

[/code]

The inner classes could be applied to any type of element. such as a span or p tag. The importance is the order. for simpleness sake I just used divs.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Trying to understand complex CSS selectors

And just to clarify these aren't functions these are merely class names. You can create any class name you want. classnames are not determined by the CSS spec. CSS is very customizable.

The .book selector is merely a class name. It can be anything you want really. unless you are talking about html elements like just the word book rather than the class .book (notice the period) classes are up to the developers wishes and or needs.

With that said, I'm not sure what you are talking about regarding the submission text box.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Trying to understand complex CSS selectors

(OP)
audiopro:

Quote (audiopro)

I see 'position: absolute' in your code and straight away, alarm bells start ringing. What exactly are you trying to do with that code?

It is not my code. I have inherited a massive CSS file (almost half a megabyte, more than 5 times larger than the associated HTML source code) that I need to understand how it works before I can do anything with it.

Quote (audiopro)

The submission box is probably a victim of the latest trend in webpages where the content loads straight away and then the adverts, promo rubbish and links to sites offering a solution to falling out of bed, take an age to load. Development of the interweb is slowly going backwards.

Just another example of fixing items that are not broken. My main free email provider (fastmail) fixed what was not broken several years ago. Now fastmail does not work on many of my computers at all and on the rest it is slower by a factor of ten. Hotmail did the same thing years ago (the reason I migrated to fastmail), and for years I could not use Hotmail. A few months ago, Hotmail again started working on my all of my computers as they have reverted some of their changes.

vacunita:

Thanks. That looks simple enough for me to understand. I won't have time for the next few weeks to pursue this further, but when I do, I am sure I will be back with more questions.

mmerlinn

http://mmerlinn.com

Poor people do not hire employees. If you soak the rich, who are you going to work for?

"We've found by experience that people who are careless and sloppy writers are usually also careless and sloppy at thinking and coding. Answering questions for careless and sloppy thinkers is not rewarding." - Eric Raymond

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close