css selectors

[Violet_82]

Hi guys, I have a question about selectors in css.
Let's take this html excerpt but before looking at the code let's assume that the html is part of a very very large page, and the same with the css. In addition the css rule below is called several times for different elements and therefore needs to be slightly different each time.

...
<div id="div_1" style="display:none">

            <div id="div_2">

                  <div class="div_3">

                        <div class="div_4_button"><a href="#" onclick="closeAlertSimple()">Continue</a></div>

                        <a href="#" class="div_4_plain">Find out more</a>

                  </div>

                  <h1>Cookies on this Toshiba website</h1>

                  <p>bla bla <a href = "#">and more bla.</a></p>

            </div>

      </div>
      ...

Say i want to target and style the link in the div_4_button div, I would do it this way:

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

But instead, I have been told that there is also another method, better than this especially if you want to use the above css rule with more than an item requiring slightly different styles. Here's what I have been shown:

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

You'll notice the css declarations are slightly different. SO tu summarize say I have this situation:

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

#other_Selector_somewhere_else #another_selector .a_different_class .div_4_plain a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

everything is fine.
If instead I have this situation

.div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

it's not good because the second rule will effectively change the first

Hope I am making sense
thanks

[PhilEaton]

Sorry what is your question?

[Violet_82]

ok, then, let's change the code sligthly then. say I have this code

...
<div id="div_1" style="display:none">

            <div id="div_2">

                  <div class="div_3">

                        <div class="div_4_button"><a href="#" onclick="closeAlertSimple()">Continue</a></div>

                  </div>

                  <h1>Cookies on this website</h1>

                  <div class = "more_text">
                    <div class = "more_paragraph">
                        <div class = "div_4_button">
                            <a href = "#">Moving on</a>
                        </div>
                    </div>

                  </div>


            </div>

      </div>
      ...

Say i want to target and style the link in the div_4_button div there are 2 ways to do it: one is to use this selector:

div_4_button a {}

and the second one is

#div_1 #div_2 .div_3 .div_4_button a {}

I was told the second one is better in certain situation. Again let's take the above html and the 2 divs with the links in, select them and slightly change the declaration.

#div_1 #div_2 .div_3 .div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}

.more_text .more_paragraph .div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;

}

everything will work fine and the two links will have 2 slightly different styles according to the css.
I suppose this is the only way I can target the 2 links and modify slightly the class without affecting the other

If instead I do the following attempting to style the 2 links with the same class, it obviously won't work, because probably the second class will override the first one

.div_4_button a {

    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;

}

.div_4_button a {

    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;}

Hope I am making sense
thanks

[PhilEaton]

I don't understand what you are trying to do, sorry. Does the style change while the page is running? If so you'll need some javascript. If not, then the page won't change at all, it will just skip the first and go to the second. CSS is a linear language. If the same description of a class occurs more than once then the second description is the only one that will be applied. However if you have the same link occuring in multiple places, then you could either just rename the link's class, or you could use the multiple selectors to describe the other link with regard to it's parent classes/ids. Are any of these what you are trying to accomplish?

[JorgeM]

If you would like to target a specific element, you can do so by assigning an ID to that element, then select the element in your CSS by prefixing with a #. If you prefix it with a dot (.), you target a class. In this example, note that we can style an element, an ID for a specific element used once on the page, or a class to apply to one or more different elements on the page. For example:

<style type="text/css">
  p {color:red;}
  #div1 {width:500px;}
  .myClass {float:left;}
 </style>

 <body>
  <div>
    <img class="myClass" src="#" alt="image" height="32" width="32" />
  </div>
  <p>This is a paragraph</p>
  <div class="myClass">This is a div</div>
  <div id="div1">This is a div</div>
 </body>

In your example, if you want to apply a different style, change the div with a class of div_4_button, to a unique id for each div. Then in your CSS, prefix it with a #

[Violet_82]

HI guys, thanks, sorry maybe I failed to explain what I was trying to achieve. The example above is what I have been given. I know I could change the html (link classes and ids) but I can't chance for reasons that don't really matter now, but I am stuck with that code, with two a tags used in different places, that share the same class of .div_4_button a. Now, these 2 classes applied to these 2 links need to be slightly different, so they have slightly different properties and even declarations occasionally, so my question is, to make sure that both html elements can be targeted using the same class I should use these selectors respectively

#div_1 #div_2 .div_3 .div_4_button a {
    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}
.more_text .more_paragraph .div_4_button a {
    height:16px;
    display:block;
    white-space:nowrap; 
        text-transform:uppercase;
}

The advantage of navigating the whole DOM in the selection is that I can target different elements with the same class, and even make small changes to the class without affecting the other element that shares the class
thanks

[ckchaudhary]

yes

#div_1 #div_2 .div_3 .div_4_button a 

and

.more_text .more_paragraph .div_4_button a 

are different selectors and hence will apply different css rules to those two links even though their immediate parent <div> has same class..

But are you telling this or asking this !!!!??

[PhilEaton]

Your only two options are to do what you suggested, or to just name the classes slightly differently. But yes you are right, using the DOM is a good way to accomplish what you are attempting.

[Violet_82]

Brilliant, sorry guys, I had trouble conveying the message for whatever reason, I couldn't really explain this correctly, but yes I was asking and not telling this : - )
I guess what wasn't really clear to me was using the DOM as a selector, I thought that this

#div_1 #div_2 .div_3 .div_4_button a {
    height:20px;
    display:block;
    white-space:nowrap; 
        text-transform:lowercase;
}

and this

.div_4_button a {
        height:20px;
        display:block;
        white-space:nowrap; 
            text-transform:lowercase;
    }

were the same thing. ANother thing that confused me was that in the sample css I posted above -which is part of a very large css although I have modified slightly the class names and ids - I could only see these selectors #div_1 #div_2 .div_3 .div_4_button a , .more_text .more_paragraph .div_4_button a whereas I was actually looking for this .div_4_button a thinking that they were actually referring to that if it makes sense