PDA

View Full Version : <div> ids and classes question



adamwestrop
08-10-2011, 08:34 PM
I've got multiple questions relating to using the ids and classes tags, however these incorporate with css and if they differ when using the div tag.

I understand outside a <div> tag, if I wanted to highlight a paragraph and assign it to a class then in the html I would use say <p class="example1"> and then in the CSS, I can use either .example 1 { or I can use p.example1 {


However a text reference I have throws that into doubt when using the <div> tag.

It then says to select differencing referencing this format:-

div p {

and

.example 1 p (which seems background to the example in my first paragraph above).

So which is right please????????????????
---------------------------------------------------------
On a separate note, can I name elements inside a <div> as well? So say my <div class="example2"> then say I want my <h1 class="h1class"> can I do this???

If this works, I then assume in the CSS, I would reference the properties for .example2 and then reference properties for .h1class and even though for instance I could of nominated font color etc in .example2, if I nominate font color in .h1class this will take priority as I have named the properties in my CSS file subsequent to .example2 ???

Thanks a bunch!

vikram1vicky
08-10-2011, 08:49 PM
I've got multiple questions relating to using the ids and classes tags, however these incorporate with css and if they differ when using the div tag.

I understand outside a <div> tag, if I wanted to highlight a paragraph and assign it to a class then in the html I would use say <p class="example1"> and then in the CSS, I can use either .example 1 { or I can use p.example1 {


However a text reference I have throws that into doubt when using the <div> tag.

It then says to select differencing referencing this format:-

div p {

and

.example 1 p (which seems background to the example in my first paragraph above).

So which is right please????????????????
---------------------------------------------------------
On a separate note, can I name elements inside a <div> as well? So say my <div class="example2"> then say I want my <h1 class="h1class"> can I do this???

If this works, I then assume in the CSS, I would reference the properties for .example2 and then reference properties for .h1class and even though for instance I could of nominated font color etc in .example2, if I nominate font color in .h1class this will take priority as I have named the properties in my CSS file subsequent to .example2 ???

Thanks a bunch!



If I am right, are you asking difference between


div p {

and

.example 1 p (which seems background to the example in my first paragraph above).
???

NoeG
08-10-2011, 08:54 PM
If its outside a div you dont need p.example1 all you would need is example 1

so for example you want the paragraph to be red


<p class="red">text that you want red</p>

your css would be like this


.red{color:red;}

inside a div you have to tell css you want to target that div so it would be this


<div class="example1"><p>text you want red</p></div>

and your css would be like this


.example1 p{color:red;}

so your telling css to style your paragraph tags in div class example1 to have a font color of red

on your second part yes you can

alykins
08-10-2011, 08:59 PM
so to tackle the first set of questions...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.example_one p{background:blue;}
p .example_one{background:orange;}
.example_two p{background:red;}
p .example_two{background:yellow;}
</style>

</head>

<body>
<div style="width:300px;">
<p>
<span class="example_one"> example one (p.example_one) </span> <br/>
<span class="example_two"> example two (p.example_two) </span>
<span> inner span, not example_one or _two and hence no effect </span>
</p>

<div class="example_one">
<p> example one (.example_one p) </p>
<span> inner span not effected </span>
</div>
<div class="example_two">
<p> example two (.example_two p) </p>
<span> inner span not effected </span>
</div>
</body>
</html>

As you can see reading through...
p .example_one {} will target anything within a p that has class example_one assigned... in the second section you have .example_one p which will make all p's targeted within example_one class... note the spans within the example_ 's that are not affected by the targeting bc they are <span>'s and not <p>'s...
does this help at all?
just different ways of targeting

adamwestrop
08-10-2011, 09:32 PM
Wow, thanks for all the replies and help guys....

(1)

OK, so lets say I have no <div> tags.

And I have say 4 or 5 paragraphs and I multiple other inline and block elements, lets say I have named <p class="example1"> but also I have a <blockquote class="example1">

Then in the CSS, I only want to target the paragraph to have the colour as red.

So I would use p.example1 {color: red; }

Am I right??

--------------
(2)

However with the inclusion of a <div class="divexample">

And I wanted to target solely all the paragraphs in divexample (because I have a lot of other elements in it too), then in the CSS I would use:-

.diveexample p {color: red; }
--------------
(3)

If I wanted to then name further elements in the divexample for instance having a bespoke paragraph in the divexample, I assume I would be best served giving the paragraph a unique class reference to then highlight it in the css?
---------------
(4)

If I was using a <p id="para1"> in the main copy, could I then in the <div> use another <p id-"para2"> ????? I know that outside the <div> that only one 'id' can be used per element.

THANKS IN ADVANCE FOR YOUR HELP.

resdog
08-10-2011, 09:58 PM
no matter where you are, your ID's have to all be different.

resdog
08-10-2011, 10:06 PM
(1)

OK, so lets say I have no <div> tags.

And I have say 4 or 5 paragraphs and I multiple other inline and block elements, lets say I have named <p class="example1"> but also I have a <blockquote class="example1">

Then in the CSS, I only want to target the paragraph to have the colour as red.

So I would use p.example1 {color: red; }

Am I right??


You are correct. the style rule basically says "for any paragraph that has a class of example1, make the color red."

--------------

(2)

However with the inclusion of a <div class="divexample">

And I wanted to target solely all the paragraphs in divexample (because I have a lot of other elements in it too), then in the CSS I would use:-

.diveexample p {color: red; }


That is also correct.


--------------
(3)

If I wanted to then name further elements in the divexample for instance having a bespoke paragraph in the divexample, I assume I would be best served giving the paragraph a unique class reference to then highlight it in the css?


yup. Classes and ID's help you single out certain elements from others in HTML.