Zmiana stylu diva w którym jest div2

pytanie zadane 3 lutego 2019 w HTML i CSS przez Q7V Gaduła (4,250 p.)

Cześć istnieje możliwość w czystym CSS zmiany diva który jest rodzicem elementu np. div2?

np.

<div>
<span></span>
</div>

Chcę zmienić wygląd diva tylko jeżeli znajduje się w nim span.

5 odpowiedzi

odpowiedź 3 lutego 2019 przez niezalogowany

odpowiedź 3 lutego 2019 przez Milesq Nałogowiec (32,020 p.)

selektor rodzica

.div2 ^ div

komentarz 3 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)

chodzi tu o to że jak znajdzie się np span w divB to divA ma zmieniac kolor. Więc to nic mu nie da

komentarz 3 lutego 2019 przez niezalogowany

@Milesq, zapis, który podałeś, stosuje się do czego innego, a mianowicie do atrybutu zaczynającego się od podanego tekstu. Przykład:

<img src="images1/obrazek1.png">
<img src="img/obrazek2.png">
<img src="images2/obrazek3.png">

img[src^="images"] {
# tu dajesz styl
}

W ten sposób ostylujesz obrazek1 i obrazek3, ale nie obrazek2.

odpowiedź 3 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)

możesz trochę bardziej opisać o co chodzi ? Nie do końca rozumiem o co Ci chodzi.

Chodzi o to że jak mamy div1 i div2 w nim, to czy możemy zmienić np kolor div1 ?

komentarz 3 lutego 2019 przez Q7V Gaduła (4,250 p.)

Tak

komentarz 3 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)

<!DOCTYPE HTML>
<html lang="pl">

    <link href="style.css" rel="stylesheet" type="text/css" />

<body>

<div class="a">
abcc
<div class="b">
abccc
</div>
</div>

	
	
</body>
</html>

.a{
background-color: red;
color: white;
}
.b{
background-color: black;
color: white;
}

Nadal nie wiem o co chodzi... wytłumacz co chcesz osiągnać

komentarz 3 lutego 2019 przez Q7V Gaduła (4,250 p.)

Mam div id=container i jeżeli w tym divie pojawi się np. div o id="test" to wtedy div container przyjmuje określone wartości, w przeciwnym wypadku zachowa swe domyślne wartości

komentarz 3 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)

bez użycia skryptów chyba się nie da, ale nie jestem specjalistą. Zobaczę jeszcze i dam znać

EDIT: Nie da się. Tylko przy skryptach. Jak nie umiesz js. to poszukaj gotowca w necie :)

odpowiedź 3 lutego 2019 przez wiktoz Mądrala (7,040 p.)

Nadaj klasę dla diva i zrób to tak:

.klasa > span
{
...
}

Napisz czy o to chodzi, bo trochę słabo to opisałeś :)

komentarz 3 lutego 2019 przez MiszczuBD Mądrala (5,320 p.)

Z tego co ja zrozumiałem to chodzi mu o to że po pojawieniu się danego obiektu w divie to jego rodzic ma zmieniac np kolor

komentarz 3 lutego 2019 przez niezalogowany

@wiktoz, zapis, który podałeś, zmieni własności span (dziecka), a nie div (rodzica).

odpowiedź 3 lutego 2019 przez azez Użytkownik (690 p.)
edycja 3 lutego 2019 przez azez

Hej,

Zakładasz, że chcesz zmienić wygląd diva - np. jego kolor tylko kiedy pojawi się drugi div/ tag - span w środku.
W takim razie skąd ten drugi tag ma się tam pojawić ?

@edit

Jest więc jeszcze taka opcja:

.klasa-diva {
opacity: 0;
z-index: 1; 
background-color: black;
height: 100px; 
width: 100px;
}

.klasa-diva > .klasa-elem-span {
z-index: 2; 
background-color: blue;
width: 100%; 
height: 100%; 
display: block;
}

Jeśli chodzi Ci jedynie o stworzenie pliku style.css, który możesz potem podpinać do takich przypadków, to skorzystaj z selektora rodzica i nadaj mu odpowiedni wygląd.
Jeśli chcesz nadać pewne zachowanie, wrażenie że elementy są żywsze, to możesz do tego użyć prostych :hover, :active.

Jeśli chcesz otrzymać, wygląd - kolor dla diva - z elementu span, to nadaj z-index: 1; dla diva, a z:index: 2; dla elementu span. Następnie nadaj background-color dla elementu span. W ten sposób zakryjesz część koloru diva w miejscu, w którym znajduje się element span.

Jeśli chodzi Ci o zachowanie - UI skorzystaj z js (w ten sposób wytłumaczysz "kiedy" element span ma się znaleźć wewnątrz diva).

Pozdrawiam,
azez

komentarz 3 lutego 2019 przez niezalogowany
edycja 3 lutego 2019

Twoja odpowiedź jest nie na temat. Autorowi chodzi o to, aby zmienić np. kolor div-a, w którym wpisany jest np. tag span. I tylko tego diva, a nie każdego. Na dzień dzisiejszy czysty CSS tego nie zrobi, bo nie ma selektora rodzica. Rozwiązaniem jest JS, ale autor pytał o czysty CSS.

Pora chyba kończyć dyskusję, jak autor będzie chciał skrypt, to ktoś mu go podeśle.

komentarz 3 lutego 2019 przez azez Użytkownik (690 p.)

Widzę osobę, która zadaje pytania, dlatego że chce się uczyć. Niech czyta i myśli, może coś wymyśli. :>
Jałowe jest to, że mnie krytykujesz. :c

Jest więc jeszcze taka opcja:

.klasa-diva {
opacity: 0;
z-index: 1; 
background-color: black;
height: 100px; 
width: 100px;
}

.klasa-diva > .klasa-elem-span {
z-index: 2; 
background-color: blue;
width: 100%; 
height: 100%; 
display: block;
}

Skoro nie możesz zmienić rodzica, to sprawiasz, że dziecko zakrywa jego wygląd (biedne udręczone dzieci).

Nadajesz klasę tylko divowi i jego elementowi span. Jeśli nie tworzysz żadnego interfejsu dla użytkownika, czyli jest to jedynie wygląd - to wiesz, kiedy element span znajduje się w divie, a kiedy nie.

komentarz 4 lutego 2019 przez niezalogowany

Ale autor nie oczekiwał wykładu na temat CSS, tylko konkretnej odpowiedzi na swoje pytanie. Twój sposób nie jest uniwersalny i wymaga dodawania nadmiarowych atrybutów divom. Oprócz nieszczęsnego spana w dicie mogą znajdować się inne elementy, które ów span zasłoni.