CSS selector driving me!

Question

Apologize in advance for a slightly lengthy code in this question

@charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; } #wrapper { width:900px; margin:0 auto 0 auto; } #header { background-color:#800080; width:894px; min-height:60px; padding-top:6px; padding-left:6px; } #header img { margin-left:200px; margin-top:10px; } #headerleft { float:left; } #header h2 { font-family:Arial Black, Arial, Helvetica, sans-serif; color:#ffff00; font-size:36px; /*float:left;*/ } #header h3 { font-family:Arial Black, Arial, Helvetica, sans-serif; color:#ffff00; font-size:14px; } #nav { background-color:#800080; width:100%; min-height:30px; } #nav ul { padding-left:7px; padding-right:7px; } #nav li { list-style:none; display:inline; padding:5px 44px 5px 44px; } #nav li a { color:#FFF; text-decoration:none; } #nav li a:hover { color:#ffff00; } #leftcol { background-color:#800080; width:125px; min-height:30px; float:left; } #leftcol img { margin-left:20px; margin-bottom:20px; } .content { padding:20px 10px 10px 20px; float:left; } <!-- admin classes --> .pageselect p { color:#C90; } #rightcol { /*background-color:#800080;*/ width:160px; min-height:330px; float:right; } .righthead { margin-top:7px; background-image:url(../images/rightcol-head.png); color:#FFF; padding: 5px 20px 5px 20px; font-size:14px; } .rightmid { background-image:url(../images/right-mid.jpg); padding: 5px 10px 5px 10px; font-size:14px; } .rightfoot { background-image:url(../images/right-foot.jpg); background-repeat:no-repeat; } .clear { clear:both; } #footer { background-color:#800080; width:880px; min-height:30px; margin-top:-20px; padding-top:30px; padding-left:20px; padding-bottom:10px; } #footer p { color:#ffff00; } #footer pa { color:#ffff00; text-decoration:none; } #footer pa:hover { font-weight:bold; } .error { color:#C30; } 

I have a stylesheet above. I am trying to create the following element (taken from firefox web developer tools):

 html > body > div#wrapper > div#leftright > div.content > div.pageselect 

In my opinion .pageselect should be a selector to do this, but I seem powerless to influence the style and it just send me wacko!

Why is this not working?

edit comments:

 <div class="pageselect"> <p> page </p> </div> 

Everything is determined by the identifier alone or by one class, just as I encode.

Answer 1

Dude

Why do you have an HTML comment in CSS?

 <!-- admin classes --> .pageselect p { color:#C90; } 

It should be:

 /* admin classes */ .pageselect p { color:#C90; } 

Note that in some browsers, the CSS rule selector can be distributed between two lines:

 .pageselect p { color:#C90; } /* that was the same as .pageselect p { color:#C90; } */ 

So, your HTML comment <!-- --> interpreted as part of the CSS selector. Since this makes no sense as a CSS selector, your whole rule is discarded.

Answer 2

The only style I see that you have for choice is

 .pageselect p { color:#C90; } 

This will result in a paragraph color inside the screen. The pages themselves are not visible. It should be easy

 .pageselect { color:#C90; } 

EDIT

Ok, I think I found your problem. Your comment is wrong and mess with style. You have

 <!-- admin classes --> .pageselect p { color:#C90; } 

If it is in your css file, then it is wrong. You should make it look like your other comments.

 /* admin classes */ 

Answer 3

Did you understand using the Firefox Firebug extension to see if the properties you want to define are defined somewhere else?

In addition, Chrome has built-in functionality. It can be found in Tools → "Developer Tools"

Answer 4

your css is a .pageselect p style, not just .pageselect

Answer 5

I assume that you have a problem with the cascading specification. Identifier-based selectors (starting in C #) take precedence over class selectors (starting in.), And both take precedence over element selectors (just the name of the elements, like p). and they summarize, which is interesting to note. let's say you have this markup:

 <div id="this-div" class="div-class"> <p id="this-paragraph" class="paragraph-class"> text text text. </p> <p> other text </p> 

then # this-div {color: blue;} will override p.paragraph-class {color: red;} regardless of the order you put in the css file. like this: each # id-based-selector costs 100 specifications, and each class-based selector costs 10, and each element-based selector costs 1.

see http://www.w3.org/TR/CSS2/cascade.html#specificity for more details.