Boxar

Tjena,

Skulle behöva hjälp med css'en, jag har nämligen 2boxar på min webbsida. Som ser ut på följande sätt:

<div class="Box Box1" id="sharepoint_server_boxcontainer1">
  <div class="BoxHeader" id="sharepoint_server_boxcontainer1">
  <div class="BoxContent" id="sharepoint_server_boxcontainer1">

<div class="Box Box2" id="sharepoint_server_boxcontainer2">
  <div class="BoxHeader" id="sharepoint_server_boxcontainer2">
  <div class="BoxContent" id="sharepoint_server_boxcontainer2">

Jag vill via css'en ändra så att box headern på de 2 olika boxarna blir olika, kan jag göra det genom att skriva:

.Box .box1container .BoxHead {
attributen här
}

.Box .box2container .BoxHead {
attributen här
}

verkar nämligen inte funka för mig?

Kan jag även göra samma sak med H1 taggar dvs jag vill att enbart H1 taggarna som jag använder o bodyn skall färgläggas kan jag skriva:

H1 .body {
attribut
}

?

ID måste vara unika på hemsidor.

.Box .box1container .BoxHead

säger => hitta element med klassen "Box" inne i den (eller barn av element inne i .Box) måste det finnas en klass .box1container osv...

din html säger inte riktigt vad som är vad, när stänger du dina div:ar?

Om det är:

<div class="Box Box1" id="sharepoint_server_boxcontainer1">
	<div class="BoxHeader" id="sharepoint_server_boxcontainer1"></div>
	<div class="BoxContent" id="sharepoint_server_boxcontainer1"></div>
</div>

<div class="Box Box2" id="sharepoint_server_boxcontainer2">
	<div class="BoxHeader" id="sharepoint_server_boxcontainer2"></div>
	<div class="BoxContent" id="sharepoint_server_boxcontainer2"></div>
</div>

Om vi ignorera att du har 3 st id med samma namn(fixar detta ASAP!)

så ser din CSS ut:

.Box1 {}
	.Box1 .BoxHeader {}
	.Box1 .BoxContent {}
.Box2 {}
	.Box2 .BoxHeader {}
	.Box2 .BoxContent {}

Om du skriver:

.class1.class2

så måste elementet både ha en klass som heter class1 och class2:

<div class="class1 class2"></div>

h1 .body

säger:

<h1><someElement class="body">...</someElement></h1>

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

men:

h1.body

säger:

<h1 class="body">...</h1>

tack för ditt svar voigtann, ska ge dig lite bättre kod saxat från källkoden:

<div id="ctl00_contentRegion_box1Container" class="Box box1Container">
   <div id="ctl00_contentRegion_boxHead1Container" class="BoxHead">
      <h2><span>box 1</span></h2>
   </div>
<div id="ctl00_contentRegion_boxBody1Container" class="BoxContent">
  <div>
    <p>box 1 cont</p>
  </div>
</div>
</div>
 
<div id="ctl00_contentRegion_box2Container" class="Box box2Container">
   <div id="ctl00_contentRegion_boxHead2Container" class="BoxHead">
     <h2><span>box 2</span></h2>
   </div>
<div id="ctl00_contentRegion_boxBody2Container" class="BoxContent">
  <div>
    <p>box 2 cont</p>
    <p>ppp</p>
</div>

Hur skriver jag css'en på bästa sätt för att style'a boxhead för respektive box?

borde det inte gå att gör på följande vis?

.Box .box1container .BoxHead {element}

när jag testar det så verkar det inte fungera?

Ta bort mellanslaget på .box och .box1container då det är samma element som har båda css klasserna

Perfekt!
Men vad gäller att bara kontrollera H1 taggar i bodyn, hur kan jag göra det?
har en div som heter contentBody, kan jag göra så att jag bara färglägger h1 taggar i contentBody?
Jag har nämligen en H1 tagg i headern som jag vill färglägga annorlunda.

Ja. Läs mitt första inlägg hur man hitta element med css

.klassnamn h1 {} säger alla h1 inne i ett element med klassen "klassnamn"