Första li fetad?

12 svar · 1 119 visningar · startad av Travoni 11 juni 2008

TravoniMedlem sedan okt. 20041 556 inlägg

Frågan11 juni 2008 13:22#1

Skulle det med ex. first child eller ngn annat sätt gå att feta (med css) Bilar och Båtar, och att alla andra (under) blir "normala".

<ul>
    <li>[B]Bilar[/B]
        <ul>
            <li>Volvo
                <ul>
                    <li>940</li>
                    <li>740</li>
                    <li>v70</li>
                </ul>
            </li>
            <li>Saab</li>
            <li>Opel</li>
        </ul>
    </li>
    <li>[B]Båtar[/B]
        <ul>
            <li>Utter</li>
            <li>Smuggler</li>
            <li>Swan</li>
        </ul>
    </li>
</ul>

mozillaMedlem sedan juli 20011 084 inlägg

11 juni 2008 13:38#2

ul li { font-weight: bold; }
ul li li { font-weight: normal; }

Är inte helt säker på om man bara kan styla en högre nivå. Men man kan i alla fall styla de lägre, och på så sätt nollställa dem igen.

itpastornMedlem sedan feb. 2007278 inlägg

12 juni 2008 10:15#3

Är inte helt säker på om man bara kan styla en högre nivå.

Du tänker rätt. Det går inte. Förslag har framförts på syntax om att man skulle kunna adressera ett element som har (eller saknar) avkomlingar. Med en sådan förmodad syntax skulle det teoretiskt gå att lösa uppgiften, men faktiskt på ett klumpigare sätt.

bossseMedlem sedan juni 2003771 inlägg

12 juni 2008 15:46#4

Så här kanske!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type=text/css> 
.fet {font-weight:bold}
.normal {font-weight:normal}
</style>
</head> 
<body> 
<ul>
    <li class=fet>Bilar
        <ul class=normal>
            <li>Volvo
                <ul>
                    <li>940</li>
                    <li>740</li>
                    <li>v70</li>
                </ul>
            </li>
            <li>Saab</li>
            <li>Opel</li>
        </ul>
    </li>
    <li class=fet>Båtar
        <ul class=normal>
            <li>Utter</li>
            <li>Smuggler</li>
            <li>Swan</li>
        </ul>
    </li>
</ul>
</body>
</html>

zcorpanMedlem sedan dec. 20042 245 inlägg

12 juni 2008 17:15#5

:not(li) > ul > li:first-line { font-weight:bold }

TravoniMedlem sedan okt. 20041 556 inlägg

12 juni 2008 20:57#6

Mozillas får jag att funka.
Bosses kan jag inte använda eftersom att jag inte har möjlighet att sätta classnamn.
zcorpans får jag heller inte att funka.

TroxyMedlem sedan mars 20041 505 inlägg

13 juni 2008 01:39#7

Hm...
såhär kl. 03:39 på morgonen föreslår jag rent spontant följande:

ul li { font-weight:bold }
ul li ul li { font-weight:normal }

itpastornMedlem sedan feb. 2007278 inlägg

13 juni 2008 12:40#8

Zcorpans förslag funkar bara i nyare versioner av Opera och Safari.

Danne VMedlem sedan aug. 20068 090 inlägg

13 juni 2008 12:49#9

Har man problem med att få en still att fastna fastän den egentligen SKA funka, så kan det ibland löna sig att ta till tvång, typ:

ul li ul li a {font-weight:bold!imporant}

zcorpanMedlem sedan dec. 20042 245 inlägg

13 juni 2008 21:56#10

Danne V skrev:

Har man problem med att få en still att fastna fastän den egentligen SKA funka, så kan det ibland löna sig att ta till tvång, typ:

ul li ul li a {font-weight:bold!imporant}

Eller så tar man reda på varför det inte fastnar, tex genom att använda debuggingverktyg som Firebug eller Dragonfly, och kanske kommer fram till att man råkade ha tex

:link, :visited { font-weight:normal }

nån annan stans i stilmallen som hade högre specificitet än ul li ul li a, och då kan man istället för att använda !important använda

ul li li :link, ul li li :visited { font-weight:bold }

som då har högre specificitet än :link, :visited.

Annars kan du få ännu större problem nästa gång det inte fastnar, eftersom !important inte går att skriva över behöver du då gå tillbaka och bråka med specificiteten ändå (och ta bort !important igen).

zcorpanMedlem sedan dec. 20042 245 inlägg

13 juni 2008 21:59#11

itpastorn skrev:

Zcorpans förslag funkar bara i nyare versioner av Opera och Safari.

Jag tror det funkar i Firefox också. :)

Danne VMedlem sedan aug. 20068 090 inlägg

13 juni 2008 22:08#12

zcorpan skrev:

Eller så tar man reda på varför det inte fastnar, tex genom att använda debuggingverktyg som Firebug eller Dragonfly, och kanske kommer fram till att man råkade ha tex
:link, :visited { font-weight:normal }
nån annan stans i stilmallen som hade högre specificitet än ul li ul li a, och då kan man istället för att använda !important använda
ul li li :link, ul li li :visited { font-weight:bold }
som då har högre specificitet än :link, :visited.

Annars kan du få ännu större problem nästa gång det inte fastnar, eftersom !important inte går att skriva över behöver du då gå tillbaka och bråka med specificiteten ändå (och ta bort !important igen).

ROTFLMAO... Är det inte kul när d blir smileys av text/kod man postar? Hahahaha :birp

itpastornMedlem sedan feb. 2007278 inlägg

14 juni 2008 10:29#13

zcorpan skrev:

Jag tror det funkar i Firefox också. :)

Ooops! Ja det gör det. FFox stödjer visst :not(S) (eftersom jag aldrig använt den, så har jag inte kollat det förut).