CODEWITHSUNDEEP
htmlcss
tworley1977
tworley1977

Reputation: 311

Nested elements producing parse errors

I'm attempting to write the following block for a style sheet, but I keep getting a parse error for the lines involving the h2, ul, and strong elements. I'm almost positive that it's the nested curly brackets, but I'm not sure how to write the nested elements without them. Google hasn't been much help in this.

Is this an instance where an inline declaration would work better? Am I wrong in my thoughts as to what the problem is? Can anybody clue me in on what I'm missing? Thanks.

#hole_stats {position: absolute; left: 0px; top: 115px;
        h2 {font-size: 1em; margin: 5,0,0,0};
        ul {list-style-type: none};
        margin-left: 10px;
        padding-left: 0px;
        margin-top: 0px;
        font-size: 0.7em;
        strong {color: yellow};
        width: 120px; 
        height: 200px; 
        color: white; 
        background-color: rgb(53, 43, 48)}

----EDIT-----

So, in light of the comments below, the correct format will be this???

#hole_stats {position: absolute; left: 0px; top: 115px;
        margin-left: 10px;
        padding-left: 0px;
        margin-top: 0px;
        font-size: 0.7em;
        width: 120px; 
        height: 200px; 
        color: white; 
        background-color: rgb(53, 43, 48)}
#hole_stats h2 {font-size: 1em; margin: 5,0,0,0};
#hole_stats ul{list-style-type: none};
#hole_stats strong {color: yellow};

Upvotes: 0

Views: 219

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

Informally speaking, the nested curly brackets are the problem. More formally, a CSS rule consists of a comma-separated list of selectors, a “{”, a semicolon-separated list of declarations, and a “}”. Each declaration is of the form property: value. There is no way use selectors inside the list of declarations. You need to write

#hole_stats {position: absolute; left: 0px; top: 115px; }
#hole_stats h2 {font-size: 1em; margin: 5,0,0,0; }
#hole_stats ul {list-style-type: none; }

etc. There are various tools for generating such code, but not in CSS.

Upvotes: 1

Ben Griffiths
Ben Griffiths

Reputation: 1696

CSS doesn't natively allow nested rules (although some CSS preprocessors, like less, do).

In pure CSS,

#hole_stats {position: absolute; left: 0px; top: 115px;
    h2 {font-size: 1em; margin: 5,0,0,0};
    ul {list-style-type: none};
    /* etc */
 }

needs to be reformulated as

#hole_stats {
    position: absolute; left: 0px; top: 115px;
}
#hole_stats h2 {
    font-size: 1em; margin: 5px 0 0 0; 
}
#hole_stats ul {
    list-style-type: none;
}
/*  etc */

Upvotes: 1

Related Questions