Avatar billede jokkejensen Novice
22. februar 2006 - 15:56 Der er 20 kommentarer og
1 løsning

Problemer med selectors

Hey..

Har lavet et lille udklip af lidt simpel html .. trode jeg..

Jeg har et div med både ID og class på.. jeg ville så gerne vha at ændre klassen på laget, ændre bgfarve og color:..


Ex:

<!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="en" lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#score.error, #summary.error
{
    color:#990000 !important;
    background-color:#fee9e9;
    border: 1px solid #990000;
}
#score.valid, #summary.valid
{
    color:#009900;
    background-color:#defede;
    border: 1px solid #009900;
}
#score.notice, #summary.notice
{
    color:#990000;
    background-color:#fee9e9;
}

</style>
</head>
    <body>
        <div id="summary" class="error">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam accumsan libero et erat. Morbi ipsum. Pellentesque facilisis, orci sit amet molestie tristique, velit nisi condimentum ligula, sed euismod est tortor at libero. Sed ut est. Fusce accumsan. Sed diam libero, malesuada nec, fermentum ut, venenatis in, elit. Morbi dui quam, eleifend sed, congue eget, interdum id, lorem. Donec dignissim ligula eget felis. Cras sit amet purus. Sed libero. Vestibulum in erat a purus pulvinar lobortis. Praesent dapibus. Morbi consectetuer consectetuer odio. Nullam orci neque, fringilla sed.</p>
        </div>
    </body>
</html>

I dette eksempel ville jeg gerne kun kunne ændre klassen til valid, error og notice..

Men det er kun hvis jeg skriver den første forekomst i CSSen at det virker - ex står #score.error, #summary.error øverst i CSSen og derfor virker class="error" men hvis jeg ændre den til valid bliver det ikke grønt..

Tror det er mine selectors der ikke er korrekte..

Mvh
Avatar billede notes2c Nybegynder
22. februar 2006 - 16:09 #1
Det giver ikke nogen mening.

Brug enten den ene eller den anden

#summary, .error
{
    color:#990000 !important;
    background-color:#fee9e9;
    border: 1px solid #990000;
}
Avatar billede jokkejensen Novice
22. februar 2006 - 16:11 #2
summary skal jo ikke farves.. kun hvis den har class="error", valid eller notice..

du farver jo #summary og alle andre der hedder .error..

Det vil jeg ikke..
Avatar billede notes2c Nybegynder
22. februar 2006 - 16:14 #3
Så skal du skrive

#summary .error
Avatar billede notes2c Nybegynder
22. februar 2006 - 16:15 #4
#summary .valid el #summary .notice
Avatar billede notes2c Nybegynder
22. februar 2006 - 16:17 #5
Og for at få det til at virke skal class flyttes

ek:
<div id="summary">
<p class="error">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam accumsan libero et erat. Morbi ipsum. Pellentesque facilisis, orci sit amet molestie tristique, velit nisi condimentum ligula, sed euismod est tortor at libero. Sed ut est. Fusce accumsan. Sed diam libero, malesuada nec, fermentum ut, venenatis in, elit. Morbi dui quam, eleifend sed, congue eget, interdum id, lorem. Donec dignissim ligula eget felis. Cras sit amet purus. Sed libero. Vestibulum in erat a purus pulvinar lobortis. Praesent dapibus. Morbi consectetuer consectetuer odio. Nullam orci neque, fringilla sed.</p>
</div>
Avatar billede jokkejensen Novice
22. februar 2006 - 16:25 #6
ja det kan jeg godt se..

Men tilbage til spørgsmålet..

Hvorfor virker den første forekomst #summary.error .. og ikke de andre ?
Avatar billede jokkejensen Novice
22. februar 2006 - 16:27 #7
det virker jo fint i FF..

Så det må da give lidt mening.. ?
Avatar billede stich Nybegynder
23. februar 2006 - 06:50 #8
OMG - en bug i IE! :-) Desværre er den også i IE7B2, så det måske være en god ide at gøre dem opmærksomme på det, via deres nyhedsgruppe:
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?dg=microsoft.public.internetexplorer.general&cat=en_us_28cca3eb-7037-4d4f-bde1-d8efee1f1420&lang=en&cr=us

I IE7 fungerer alternative constructs dog, fx #summary[class="error"] osv. Men det er selvfølgelig næppe en tilfredsstillende løsning...
Avatar billede notes2c Nybegynder
23. februar 2006 - 09:37 #9
#navn er en id selector oh .navn er en class selector og kan i samskrives...

Men kan kombineres som vist ovenfor.

Se evt her for yderligere info: http://www.w3.org/TR/CSS21/selector.html#x4
Avatar billede stich Nybegynder
23. februar 2006 - 10:03 #10
Jo de kan, læs http://www.w3.org/TR/CSS21/selector.html#q2 og http://www.w3.org/TR/CSS21/selector.html#class-html
Det du linker til omhandler hvordan "simple selectors" kan kombineres -- men "#summary.valid" er blot én "simple selector".
Avatar billede notes2c Nybegynder
23. februar 2006 - 11:11 #11
Det kan godt være at jeg er blind, men jeg kan altså ikke se noget sted hvor der står at  id Selector og class selector kan sammenskrives, kun at et subset of classes:

p.pastoral.marine { color: green }

stich -> kunne du vise mig teksten hvor det står, har prøvet at kigge men kan ikke se det...

Og blot for en orden skyld, så viser erfaringen at jo mere complex css bliver jo færre understøtter den....
Avatar billede stich Nybegynder
23. februar 2006 - 11:35 #12
Det bliver kort, for jeg skal ud af døren om et øjeblik. Men det står der vel heller ikke direkte, jeg tolker bare følgende som at .foo blot er en shorthand notation:

Working with HTML, authors may use the period (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning.

Og både Mozilla og Opera - måske også MS, med mindre de har gjort det for at mest muligt skal fungere - må åbenbart være af samme holdning.
Avatar billede notes2c Nybegynder
23. februar 2006 - 12:22 #13
Det du skriver har kun med class funktionalitet at gøre. Hvor man kan spørge på om en class har en specifik value el forskellig fra.

Min påstand går stadig på at man ikke kan sammensætte id selctor og class selector.

Så måden at skrive det på er som jeg har foreslået i ovenstående eks. Vil jeg mene...
Avatar billede stich Nybegynder
23. februar 2006 - 14:48 #14
Tjaa, jeg vil stadigvæk holde på det andet. :-) Jeg vil ser ikke hvordan man kan spørge på om den er "forskellig fra", den sætning fortæller bare at div[class~=foo] er ækvivalent med div.foo (i HTML - m.fl. som der står nævnt i specifikationen bagefter). Og det er det jeg ser som essensen i det her, class-selectoren er blot en anden notation (convenience-, shorthand-, ...) for en attribut-selectorer -- der dog kun *indimellem* kan benyttes, hvorfor den ikke er nævnt i 5.2.
Avatar billede notes2c Nybegynder
23. februar 2006 - 17:47 #15
Fred med det...

Vi lader bare det stå et øjeblik, hvem ved ....
Avatar billede stich Nybegynder
23. februar 2006 - 18:28 #16
Hehe, den tanke havde jeg også. Men eftersom CSS3 har et godt stykke vej endnu, syntes jeg egentlig det var godt nok at få på plads.
Vi har dog vist begge styr på 'factsne', og mener alligevel vi hver især har ret i egen fortolkning, til trods for de er modstridende - så det er nok en deadlock. :-) Og den påtænkte mening er der næppe nogen af os der har mandat til at give et endeligt svar på alligevel, så jeg er enig med dig i vi bør lade den stå, indtil en af os evt. skulle finde et 'hårdtslående' argument...
Men tak for diskussionen, det er indimellem interessant nok at høre et andet syn på sagerne!
Avatar billede notes2c Nybegynder
23. februar 2006 - 23:49 #17
Ja det kan være sundt en gang imellem....
Avatar billede jokkejensen Novice
15. april 2006 - 21:59 #18
Nå gutter, beklager jeg ikke selv har trukket efter et svar, men i ser jo ud til at være rimelige gode til at finde ud af det..

Så deler I ikke points ? (ligger et svar)

Tak for Jeres tid.
Avatar billede stich Nybegynder
19. april 2006 - 12:13 #19
Ellers tak. Og bare for en anden gangs skyld, så kan du fint gå ud fra jeg ikke have points, når jeg ikke har lagt et svar! :-)
Avatar billede jokkejensen Novice
19. april 2006 - 12:40 #20
okay :)..

Så er der flere til dig notes2c :)

Mvh
Avatar billede notes2c Nybegynder
19. april 2006 - 14:12 #21
Men synes da du skal fortælle hvad du har valgt
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester