Mit CSS ein bestimmtes Elternelement ansprechen?

Hallo!

Ich möchte, dass das Element div.gruppe nur dann einen Hintergrund erhält, wenn es ein span#ich beinhaltet. Geht das mit CSS und HTML?

Also ich möchte das Elternelement nur bei einem bestimmten Kindelement selektieren. Was wäre der richtige Selektor?

LG Jan

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

pythonpups

12.08.2016, 22:26

Ich kenne keine Möglichkeit das mit purem CSS zu machen.

Als erstes kommt mir da die parent()-Methode von Jquery in den Sinn.

verreisterNutzer

12.08.2016, 22:35

Okay danke! Kannst du mir das noch erklären? :)

TanteHolger

12.08.2016, 22:40

@verreisterNutzer

Versuch es so.

$("#ich").parent().css("background-color", "#000");

pythonpups

12.08.2016, 22:44

@TanteHolger

Wollte ich auch grade sagen. Warst Du schneller. ;-)

pythonpups

12.08.2016, 22:47

@verreisterNutzer

Als erstes mußt Du allerdings JQuery einbinden. Packe folgendes in Deinen Head:

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

pythonpups

12.08.2016, 22:50

@verreisterNutzer

Und noch kurz zur Erklärung: JQ ist eine Javascript-Bibliothek, die neue Funktionen zu Javascript hinzufügt. Du kannst mit CSS-Selektoren Elemente ansprechen und dann... Dinge damit tun. ;) Hier würdest Du das Elemet mit der ID "ich" selektieren ($("#ich")), sein Elternelement raussuchen lassen (.parent()) und dann z.B. eine CSS-Eigenschaft darauf anwenden. Wenn man sich nicht vor ein wenig Javascript scheut ist JQ das praktischste seit der Erfindung von geschnittenem Brot.

TanteHolger

12.08.2016, 22:50

@pythonpups

Dafür warst Du mit der Methode schneller. Ich hätts mal wieder auf dem komplizierten Weg mit zig Schleifen geregelt :D

medmonk

12.08.2016, 23:03

@pythonpups

Hier würdest Du das Elemet mit der ID "ich" selektieren ($("#ich")), sein Elternelement raussuchen lassen (.parent()) und dann z.B. eine CSS-Eigenschaft darauf anwenden.

Wenn man gescheit ist, man lediglich das .addClass() Attribut verwendet und die Formatierung im CSS notiert. So bleibt alles sauber getrennt und im gleichen Zug übersichtlicher bleibt. Was jQuery angeht, man alles nötige in der Dokumention findet.

abbrechen

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

22.08.2016, 01:55

Ein parent selector ist erst noch in der Mache. Wird also noch ein paar Jahre dauern.

Ansonsten schließe ich mich meinen Vorrednern an. Am einfachsten ist es mit jQuery.
z.B. Click Event mit dem Child, darin das Parent.

TanteHolger

12.08.2016, 22:25

Dazu benötigst Du Javascript. Mit jQuery würde das denke mal am einfachsten gehen.

TanteHolger

12.08.2016, 22:37

Hier ein Beispiel (Pseudo) als kleiner Denkanstoss. Kann grad nicht testen, sollte aber funktionieren =) Du solltest das ganze dann mit einer Schleife abarbeiten wenn es mehrere Elemente mit der Klasse gruppe gibt.

if($('.gruppe').children().length >0)

Ähnliche Beiträge

CSS auf ein bestimmtes Zeichen anwenden?

Liebe Leute,

Ich möchte mit CSS ein bestimmtes Zeichen formatieren, zum Beispiel alle Rufzeichen auf einer Seite rot einfärben. Ich weiß nicht, wie ich das selektieren soll ohne in den HTML-Code einzugreifen (das soll nicht geschehen).

(Falls das mit keinem Kniff zu bewerkstelligen ist, würde ich mich über ein Javascript-Schnipsel freuen, das das tut.)

...zum Beitrag

Frage zu CSS: Bild in einem Element strecken?

Hii,

bin gerade dabei mit vanilla js, css, html ein game zu entwickeln. So sieht es bis jetzt aus:

Wie kann ich machen, dass das Bild nach unten im Element gestreckt wird, statt doppelt gezeichnet. Mein css (unfertig) sieht so aus:

Mfg Weißbrot

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

HTML/CSS Kreis Animation um Element bei Klick?

Hey, ihr kennt doch sicherlich die Animationen die Google verwendet. Ihr klickt auf einen Button und um den Button bildet sich ein Kreis beim Klick (Animation). Ich weiß, etwas Blöd erklärt aber falls ihr nicht versteht was ich meine, habe ich euch ein Bild da gelassen. Wir bekomme ich das mit HTML/CSS hin?

...zum Beitrag

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zum Beitrag

HTML Element von rechts nach links schieben bei scroll?

Ich suche ein einfaches Beispiel wie man ein HTML Element von links nach rechts schieben laest sobald das browser fenster runter gescrollt wird an den punkt wo das html element sichtbar sein soll.

ihr kennt das bestimmt was ich meine, diese modernen webseiten designs haben sowas oft, dann sieht alles bisjen cooler aus.

es gibt aber so viele verschiedene beispiele das ich nicht so das richtige finde.

was ich will ist ganz einfach das html element nach schieben und am besten noch mit so ein effekt dazu zum beispiel von durchsichtig zu undurchsichtig.

...zum Beitrag

.gif Datei als HTML Hintergrund?

Hey Community! ich möchte mittels html & css ein .gif Video als hintergrund in einer .html benutzen. wie wäre dafür der code in html und css?

...zum Beitrag

HTML+CSS: Wie bekomme ich Text Zentriert in einem Inline-Flex?

Folgender jsfiddle:

https://jsfiddle.net/t38zjxow/

CSS:

div {
  display:flex;
}

span {
  background:#0f0;
  display:inline-flex;
  width:10em;
  margin:1em;
  text-align:center;
}

HTML:

<div>
  <span>test1</span>
  <span>test2</span>
</div>

Wie bekomme ich die beiden Texte zentriert?

...zum Beitrag

Bild Ausschnitt zeigen HTML, CSS?

Hallo Miteinander, meine Frage wäre, wie ich mit Hilfe von HTML und CSS genau diesen Bildausschnitt zusammen mit dem Kreis schaffe... Kennst sich jemand evtl. in diesem Themengebiet aus? LG, Jan

...zum Beitrag

DIV-Abstand entfernen (HTML/CSS)

Wenn ich meine Datei in DIV-Elemente aufteile, wird im Browser automatisch ein Abstand zwischen diesen eingefügt. Dabei spielt es keine Rolle, ob ich als Browser Chrome oder Firefox verwende. Gibt es eine Möglichkeit das zu unterbinden?

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

Intellij .css file wird nicht farbig hinterlegt?

Habe in Intellij eine html-Datei angelegt.

Im element <style> ist der code bzw. die syntax nicht farbig hinterlegt

im rest bzw. den anderen Elementen schon.

Kann mir jemand erklären, warum?

Was muss ich hier umstellen, damit der Code Farbig hinterlegt wird?

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

html & css: Linksbündig und rechtsbündig in _einer_ Zeile?

Gibt es eine Möglichkeit OHNE <div> text in einer Zeile linksbündig und rechtsbündig zu schrieben?

Anmerkung: Das Elternelement ist ein DIV !

Ich will aber nicht noch mehr DIV einfügen...

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen