I’m a little confused about targeting elements, I know this might be simple but every-time I wan to target nested elements I have to attempt a few time before I get it right.
For instance I dont know understand when to create spaces between elements or when to put them together for instance to target the following paragraph you would do something like this…
Hi,
The first CSS rule you had shown was correct for targeting the html you posted.
The problem with the spaces in your second rule is this:
It is saying: “When an element named Content is found in ANY div then look for any element with this class (.last-name) when it is found in a <p> tag which is a child of an LI”
Easy. div#content refers to a div with the ID of content; div Content refers to something with an ID of content (doesn’t matter what) inside a div element.
Same thing with p.last-name - that refers to a paragraph element with the class of last-name. p .last-name points to some element with the last-name class inside a paragraph.
Well wouldn’t call myself an expert but I think that in order to work out what has spaces and what doesn’t, you need to think about whether something is an attribute of an element (ie an ID or class) or is one element nested within another.
If it’s the former there are no spaces. if it’s the latter, there are.
This is because you are saying “The div whose ID is content, which has a ul nested in it, which has an li nested in it, which has a p nested in it whose class is last-name”. Essentially the spaces go where the commas are if you see what I mean…
Hope that helps - I’m sure an expert could explain it better.
edit: Haha - and they did. Must learn to type faster too!
When you remove the spaces and you have p.last-name it is styling only <p> tags with that class name.
p.last-name = target only the paragraph that contains the name “.last-name” and ignore any other element using this class name (I hope I got this right).
Thanks I will take a look at the links and try to understand this correctly
writing simply .last-name will target ALL element with the class “last-name” regardless of tag.
because there is no space between the class and the tag ( and the tag appears before the class) p.last-name {} targets this tag and only : <p class=“last-name”>. There may be other elements with the class “last-name” but only P elements with that class will be affected.
if you wrote .last-name P{}, only P tags that are DESCENDANTS of ( that is that appear anywhere within tags of) elements with the class "last-name " will be affected.
ANOTHER advantage to this is that it adds specificity… take a look at the following mark up and css rules
<div>
<p class=“classname”> some text</p>
</div>
div .classname{color:red;}
.classname{color:green;}
.You might think that the text would be green, after all you made a specific class for making the text green… right? Well yeas, but since you have rule that has a tag before it will override the simple “.classname” rule. in this case “.classname” and “p.classname” target exactly the same element , but “p.classname” has a higher specificity in that way that method can be aneat trick in some complex style sheets
A space separates each token, and each token represents a separate element.
So p is a single token that refers to a paragraph, p.last-name is a single token that refers to a paragraph with class="last-name", and p .last-name is a combination of two tokens that refers to an element with class="last-name" that is inside a paragraph.
When you’re setting a property on a class/ID, you don’t need to set the element as well - so p.last-name will refer to a paragraph with class="last-name", but .last-name will refer to any element with class="last-name".
Another thing to note is that you don’t need to list every element in the chain. (If you did, you’d need to start every line with html body …!). You can miss out any that you don’t need. So if the only time that you have a class="last-name" inside id="content" is when it is a paragraph inside a list item, you can abbreviate the declaration to Content .last-name - anything that you don’t need can be left out.
because there is no space between the class and the tag ( and the tag appears before the class) p.last-name {} targets this tag and only : <p class=“last-name”>. There may be other elements with the class “last-name” but only P elements with that class will be affected.
if you wrote .last-name P{}, only P tags that are DESCENDANTS of ( that is that appear anywhere within tags of) elements with the class "last-name " will be affected.
You read my mind, I was confused about having the P tag before and after a selector, but I guess these samples answered my question.
Very good information here too!
That is just a simple descendant selector in your second rule
When you remove the spaces and you have p.last-name it is styling only <p> tags with that class name.