...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum