CSS meerdere elementen op een class selector.

woensdag 3 februari 2010 18:23

Acties:

0 Henk 'm!

Topicstarter

Ik heb nu deze situatie in CSS.

[code=css]
.home h2 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
[/code=css]
Hierin wil ik het h1 element ook in verwerken echter

[code=css]
.home h2, .home h1 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
[/code=css]

of
[code=css]
.home h2 && h1 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
[/code=css]

werken niet, wat is de juiste methode om toetepassen in deze situatie?

Ik zit namelijk niet te wachten op dit:
[code=css]
.home h2 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
.home h1 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
[/code=css]

[ Voor 18% gewijzigd door Zakkenwasser op 03-02-2010 18:26 ]

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]

woensdag 3 februari 2010 18:26

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

MrJey schreef op woensdag 03 februari 2010 @ 18:23:
wat is de juiste methode om toetepassen in deze situatie?

Deze. Met een hamer in het donker gaan lopen rondzwaaien en hopen dat je net die ene spijker in de muur raakt is net zo zinloos als wat je nu probeert.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 3 februari 2010 18:34

Acties:

0 Henk 'm!

Tomfish

RobIII schreef op woensdag 03 februari 2010 @ 18:26:
[...]

Deze. Met een hamer in het donker gaan lopen rondzwaaien en hopen dat je net die ene spijker in de muur raakt is net zo zinloos als wat je nu probeert.

Waar zou onderstaande niet werken? Volgens mij is het wel gewoon goed namelijk.
[code=css]
.home h2, .home h1 {
background:#83a59d url(../img/bg_h2-1.jpg) repeat-y scroll right center;}
[/code=css]

woensdag 3 februari 2010 18:37

Acties:

0 Henk 'm!

Zakkenwasser

Topicstarter

The following selector is conceptually similar to the one in the previous example, except that it adds an attribute selector — it adds a constraint to the h1 element, that it must have class="opener":

h1.opener + h2

nouja, zal wel een typo geweest zijn.

.home h2, .home h1 werkt idd gewoon wel.

toch moet dit korter kunnen .

[ Voor 19% gewijzigd door Zakkenwasser op 03-02-2010 18:40 ]

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]

woensdag 3 februari 2010 18:38

Acties:

0 Henk 'm!

Alex)

HTML:

<!doctype html>

<html>
<head>
<title>CSS test</title>
<style>
.home h2, .home h1 {
background:#83a59d url(http://www.google.com/images/srpr/logo1w.png) repeat-y scroll right center;}
</style>
</head>
<body>
<div class="home">
<h1>Hoi, ik ben een h1.</h1>

<h2>Hoi, ik ben een h2.</h2>

</div></body>
</html>

Geeft bij mij (Firefox 3.6) deze output:
Afbeeldingslocatie: http://tweakers.net/ext/f/QZKEPUmi6ChRqEGtNhSkyDIC/full.png

Lijkt me goed toch?

We are shaping the future

woensdag 3 februari 2010 18:39

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Xtresis schreef op woensdag 03 februari 2010 @ 18:34:
[...]

Waar zou onderstaande niet werken? Volgens mij is het wel gewoon goed namelijk.

In gevallen waar de h1 bijvoorbeeld ergens anders met meer specificity gedefinieerd is

Het gaat er mij om dat MrJey komt aanzetten met dingen als:

Cascading Stylesheet:

1	.home h2 && h1 {

Waarbij de && combinator in CSS2 noch CSS3 gewoon niet eens gedefinieerd/bekend is. Waar dat dan vandaan komt mag Joost weten maar daardoor concludeer ik dus dat er maar wat geprobeerd wordt. Had 'ie net zo goed

Cascading Stylesheet:

1	.home h2 and_also h1 {

kunnen proberen.

[ Voor 40% gewijzigd door RobIII op 03-02-2010 19:18 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 4 februari 2010 21:32

Acties:

0 Henk 'm!

ronn0

RobIII schreef op woensdag 03 februari 2010 @ 18:39:
[...]

In gevallen waar de h1 bijvoorbeeld ergens anders met meer specificity gedefinieerd is
Het gaat er mij om dat MrJey komt aanzetten met dingen als:
Cascading Stylesheet:
1
.home h2 && h1 { 
Waarbij de && combinator in CSS2 noch CSS3 gewoon niet eens gedefinieerd/bekend is. Waar dat dan vandaan komt mag Joost weten maar daardoor concludeer ik dus dat er maar wat geprobeerd wordt. Had 'ie net zo goed
Cascading Stylesheet:
1
.home h2 and_also h1 { 
kunnen proberen.

Lol, dat is niet in zijn geheel waar. And_Also wordt voor zover ik weet in geen enkele markup, dan wel programmeertaal gebruikt. De && komt in diverse 'talen' terug en is dus zo'n gekke gedachten nog niet.

offtopic:
Daarbij had ik van een Moderator wel een wat meer volwassen antwoord verwacht dan dit, de eerste link met een tutorial kon er nog prima mee door, maar om een bezoeker nou geheel te kijk te zetten is nergens voor nodig lijkt mij.

donderdag 4 februari 2010 21:40

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

ronn0 schreef op donderdag 04 februari 2010 @ 21:32:
Lol, dat is niet in zijn geheel waar. And_Also wordt voor zover ik weet in geen enkele markup, dan wel programmeertaal gebruikt.

AndAlso (VB.Net)
andalso (Erlang)
andalso (Standard ML)

ronn0 schreef op donderdag 04 februari 2010 @ 21:32:
De && komt in diverse 'talen' terug en is dus zo'n gekke gedachten nog niet.

In de meeste talen is && een logical AND. Hoe is dat als zinnig te interpreteren als je niet eens in de buurt bent van booleaanse algebra/operaties maar 2 verschillende elementen hetzelfde wil opmaken

Het punt was dat er maar gegokt wordt in plaats van zoeken naar zinnige oplossingen in de specificatie(s) waar ik naar verwees danwel andere bronnen waar ik naar verwees. Dat is gewoon je reinste vorm van je tijd verdoen. Je ziet werkelijk ner-gens de && "combinator" terugkomen want niemand zal die nergens suggereren, omdat 'ie niet bestaat. Om dan in het wilde weg dingen te gaan proberen in plaats van uit te zoeken waar je mee bezig bent is gewoon zinloos. Of je dan And_Also probeert, of + of & of "plus" is net zo zinloos.

ronn0 schreef op donderdag 04 februari 2010 @ 21:32:

offtopic:
Daarbij had ik van een Moderator wel een wat meer volwassen antwoord verwacht dan dit, de eerste link met een tutorial kon er nog prima mee door, maar om een bezoeker nou geheel te kijk te zetten is nergens voor nodig lijkt mij.

Waar zet ik TS dan te te kijk? Behalve dat ik een aantal relevante links geef en hem een (flinke) duw in de juiste richting geef zie ik niet waar ik 'm te kijk zou zetten

[ Voor 42% gewijzigd door RobIII op 04-02-2010 21:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Onderwerpen