css help
- Started
- Last post
- 11 Responses
- JamesBoynton
Afternoon people
I have a quick question regarding css.
I quite often use css like this '#divname p' in order to style any p within the div.
But more and more i am seeing 'p #divname'... is it the same thing? Any help would be appreciated.
Cheers
- 7point340
not the same
- JamesBoynton0
Ok cool, i have some more digging to do!
- jonatne0
well you can't have a div inside a p but you can have an element with an id inside a p
so whether you have <p><span id="whatever"> which would be
p #whatever
or you have <div id="whatever"><p> which would be
#whatever p
they would both work for their occasion respectively- ah but just because call it divname doesn't mean it's a div necessarily7point34
- and why can't you put a div inside a p?7point34
- I thought you could. HmmmJamesBoynton
- only inline level elements are allowed inside p, div is block level. it won't validate, and results may varyacescence
- ah, i've never had any problem... i usually only do it with floating blocks of text7point34
- fuck p'ssection_014
- JamesBoynton0
Cool, thanks. Going to take a bit for me to get my head around.
Cheers!
- jonatne0
the order in which selectors are written correspond to the order in which they are nested
- JamesBoynton0
Perfect! thats exactly what i needed to know.
- jonatne0
7.34 you can't put divs inside paragraphs because divs are block level elements
James, once you figure out nesting and selectors you will be able to user jQuery which is a very powerful javascript library. It may even help you better understand nesting and selectors and how the DOM works.
- JamesBoynton0
Cheers jonatne.
- JamesBoynton0
Jonathne... can you also help me with this please
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }Is there a difference if you put the word div in front of the #
Cheers
- technically no. though id styles (indicated with #) should only appear on 1 object. never more than once7point34
- so you wouldn't need to say its a div... the style sheet will just find the object with that id7point34
- classes can be tag specific though. (indicated with a . )
you can write different styles for p.nav, div.nav, span.nav etc.7point34
- acescence0
just to add another layer of complexity, there's also specificity when multiple rules apply to the same object
- Count the number of element names in the selector
- Count the number of pseudo-classes and other non-ID attributes in the selector, and multiply by 10.
- Count the number of ID attributes in the selector, and multiply by 100.
- Add up all three numbers, and that is that property's specificity. higher numbers take precedence over lower
- jonatne0
what 7.34 said is right
it's unnecessary on an id selector (#) because you can only have one element per page with any id name..
however, what it means is that
#navigation will target any element with the id "navigation"
while div#navigation will only target divs with the id "navigation"