Selektionsproblem in Listen

Silversurfer · 2 Mai 2011

Hallo Leute,

ich habe einen Listenaufbau, der folgendermaßen aussieht:

Code:

<ul>
<li id="current"><a>---</a>
<ul>
<li><a>---</a></li>
<li><a>---</a></li>
</ul>
</li>
</ul>

Nun möchte ich gerne nur das erste <a>---</a> selektieren.

wenn man z.B. li#current a selektiert, dann werden alle a's selektiert - ich benötige aber nur das erste.

Leider konnte ich dazu keinen passenden Selektor finden. Kann mir jemand dabei helfen?

Vielen Dank schonmal
Chris

prm · 2 Mai 2011

Code:

#current a {Styleangaben}

dürfte sich auf alle a beziehen.
Dann weise dem speziellen a noch eine Klasse zu.

Code:

<a class="speziell">

oder weise den ID nicht li sondern a zu.

Commodore · 2 Mai 2011

Oder du verwendest die Pseudoklasse :first-child. Es sollte mittels #current:first-child {…} funktionieren.

Silversurfer · 2 Mai 2011

Hallo und danke für die Antworten.

So einfach ist es leider nicht, da ich in diesem Fall Joomla einsetzte.

Wenn ich mittels #current:first-child {} versuche, dann passiert einfach garnichts.
Selbst mit #current:first-of-type a { ... } selektiert er es nicht.

Obiges war nur ein von mir geschriebener Pseudo-Code - hier wie es im Original aussieht:

HTML:

<ul class="joomla-nav>
	<li class="selected parent item110">
		<a href="...">Linktext</a>
		<ul>
			<li id="current" class="selected item111"> 
				<a href="...">Linktext</a>
			</li>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>

Selektieren möchte ich das allererste <a> direkt hinter <li class="selected parent item110">

Commodore · 2 Mai 2011

Damit sollte es funktionieren: Selectors

Edit: Ich mach das mit dem first-child immer wieder falsch, so funktionierts jedenfalls:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <title>Testseite</title>
        <style type="text/css">
        #selected > a:first-child{
            background-color: red;
        }
        </style>
    </head>
    <body>
    <ul>
        <li><a href="#">foobar</a></li>
        <li><a href="#">foobar</a></li>
        <li><a href="#">foobar</a></li>
        <li id="selected">
            <a href="#">foobar</a>
            <ul>
                <li><a href="#">foobar</a></li>
                <li><a href="#">foobar</a></li>
                <li><a href="#">foobar</a></li>
            </ul>
            <a href="#">Falls hier noch links kommen sollten, werden diese nicht mehr ausgew&auml;hlt</a>
        </li>
        <li><a href="#">foobar</a></li>
        <li><a href="#">foobar</a></li>
        <li><a href="#">foobar</a></li>
    </ul>
    </body>
</html>

Selektionsproblem in Listen

Silversurfer

Neues Mitglied

prm

Aktives Mitglied

Commodore

Guest

Silversurfer

Neues Mitglied

Commodore

Guest

Neueste Beiträge