---
title: "CSS-klass på första elementet på sidan?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/60493-css-klass-på-första-elementet-på-sidan"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Andy"
published: "2002-11-28T10:27:41.000Z"
updated: "2002-12-03T11:46:19.000Z"
replies: 5
views: 276
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/60493-css-klass-på-första-elementet-på-sidan"
---

# CSS-klass på första elementet på sidan?

## #1 — Andy, 2002-11-28T10:27Z

har ett antal H1-headers på en sida. Går det på något sätt skapa två olika classer för dessa - en som används på den första H1-tagen på sidan, och en som används på resten - utan att behöva lägga till class="classnamn" i H1-taggarna? Jag vill alltså skilja på dessa på styleshett-nivå, men inte på markup-nivå.

Permalänk: https://www.webforum.nu/p/60493

## #2 — OlleBoop, 2002-11-28T10:45Z

Tyvärr, det går inte.

Permalänk: https://www.webforum.nu/p/868787

## #3 — jarvklo, 2002-11-28T10:52Z

Hmm...
Det finns en möjlighet i CSS2... "Adjacent sibling selectors" (som ger möjlighet att styra "syskons" utseende - dvs närliggande taggar på samma nivå)...
Men tyvärr har inte MSIE6 stöd för den delen av CSS2 som det verkar...
Kör följande kod i Moz1.1 ...

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
	<title>Adjacent sibling selectors</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1{color: green;}
h1 + h1 {color:red;} /* h1 direkt efter en h1 skall ha denna stil */
p + h1 {color:silver;} /* h1 direkt efter ett p skall ha denna stil */
-->
</style>
</head>
<body>
		<div>
<h1>Första</h1>
<h1>Andra</h1>
<h1>Tredje</h1>
text som ligger "utanför taggar" påverkar inte utseendet
<h1>Fjärde</h1>			
<div>
	Men det gör text som ligger inom taggar
	(som denna som ligger i en div)
	vilket gör att nästa h1:a är grön igen...
</div>
<h1>Femte</h1>

<hr />

<h1>Första</h1>
<p>Text inom p</p>
<h1>Andra</h1>
<p>Text inom p</p>
<h1>Tredje</h1>
<p>Text inom p</p>
<h1>Fjärde</h1>			
<p>Text inom p</p>
<h1>Femte</h1>
		</div>
	</body>
</html>
```

Referenser:
<http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors>
och
<http://www.meyerweb.com/eric/css/tests/css2/sec05-07.htm>

Permalänk: https://www.webforum.nu/p/868796

## #4 — OlleBoop, 2002-11-28T14:07Z

Helt stum av beundran, I'm not worthy! :birp

Permalänk: https://www.webforum.nu/p/868947

## #5 — Dino, 2002-11-28T18:44Z

Detta funkar i IE6, NS6. I tidigare versioner vet jag inte.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Untitled</title>
<style>
   DIV H1{color: blue}/*Alla H1 som finns i alla DIVar blir blåa*/
   H1 {color: red} /*Alla övriga H1 blir röda*/
</style>
</head>
<body>
<div><h1>Heading 1</h1></div>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/869113

## #6 — ZonD, 2002-12-03T11:46Z

Det är väl ingen idé använda det nuförtiden. De flesta kör nog fortfarande IE5

Permalänk: https://www.webforum.nu/p/875100

---

Tråden på webben: https://www.webforum.nu/amne/html-css/60493-css-klass-på-första-elementet-på-sidan
