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å.
CSS-klass på första elementet på sidan?
HTML & CSSur HTML, XHTML & CSS
5 svar · 269 visningar · startad av Andy
Tyvärr, det går inte.
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
Helt stum av beundran, I'm not worthy! :birp
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>
Det är väl ingen idé använda det nuförtiden. De flesta kör nog fortfarande IE5