Menu input radio

Question

Witam, mam problem ze stworzeniem menu portfolio za pomocą inputów radio. A mianowicie stworzyłem takie menu 

		<input class="nav-menu" id="all" type="radio" name="filter" checked="checked">
		<label for="all">Wszystkie</label>
		
		<input class="nav-menu" id="illustrations" type="radio" name="filter">
		<label for="illustrations">Ilustracje</label>
		
		<input class="nav-menu" id="posters" type="radio" name="filter">
		<label for="posters">Plakaty</label>
		
		<input class="nav-menu" id="typography" type="radio" name="filter">
		<label for="typography">Typografia</label>
		
		<input class="nav-menu" id="packaging" type="radio" name="filter">
		<label for="packaging">Opakowania</label>

i zdefiniowałem go w css

.row .nav-menu,
.portfolio
{
	display: none;
}

label
{
	padding: 5px 10px;
	margin: 0px;
	color: #3a3f43;
	cursor: pointer;
	display: inline-block;
}

.nav-menu:checked + label
{
	color: #fff;
	background-color: #3a3f43;
	border-radius: 3px;
}

#all:checked ~ .portfolio .all,
#posters:checked ~ .portfolio .poster,
#illustrations:checked ~ .portfolio .illustration,
#typography:checked ~ .portfolio .typography,
#packaging:checked ~ .portfolio .package
{
	display: block;
}

klasa portfolio to kontener dla wszystkich prac, każda praca jest w znaczniku figure z nadaną klasą kategorii oraz all. Chodzi o to żeby po naciśnięciu labela z nazwa kategorii wyswietlały sie prace tylko z tej kategorii, a z jakiegoś powodu to nie działa. 

Z góry dziękuje za każdą pomoc.

Comments

a czemu robisz tu elementy radio? menu nie pasuje mi za bardzo do elementów formularza... nie lepiej bardziej standardowo jako lista. np. z buttonami?

---

W sumie to tak zrobiłem na początku. To robie dla siebie tylko z ciekawości czy dałoby się tak zrobić

---

@JBacob, Udostępnij, proszę więcej html, trudno się odnieść do tego co już jest. 

---

<main  class="container">
	<div class="row">

		<input class="nav-menu" id="all" type="radio" name="filter" checked="checked">
		<label for="all">Wszystkie</label>
		
		<input class="nav-menu" id="illustrations" type="radio" name="filter">
		<label for="illustrations">Ilustracje</label>
		
		<input class="nav-menu" id="posters" type="radio" name="filter">
		<label for="posters">Plakaty</label>
		
		<input class="nav-menu" id="typography" type="radio" name="filter">
		<label for="typography">Typografia</label>
		
		<input class="nav-menu" id="packaging" type="radio" name="filter">
		<label for="packaging">Opakowania</label>
	
	</div>
 
	<section class="portfolio">
		<div class="row">
			<figure class="three columns all poster">
				<img src="images/image-1.jpg" alt="To jest pierwsza miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-2.jpg" alt="To jest druga miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all poster" data-category="plakaty">
				<img src="images/image-3.jpg" alt="To jest trzecia miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all typography" data-category="typografia">
				<img src="images/image-4.jpg" alt="To jest czwarta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
		</div>
		<div class="row">
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-5.jpg" alt="To jest piąta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all poster" data-category="plakaty">
				<img src="images/image-6.jpg" alt="To jest szósta miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all illustration" data-category="ilustracje">
				<img src="images/image-7.jpg" alt="To jest siódma miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
			
			<figure class="three columns all typography" data-category="typografia">
				<img src="images/image-8.jpg" alt="To jest ósma miniatura portfolio">
				<figcaption>
					<h4>Lorem ipsum</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ultrices lorem. Etiam in nisi nisi. Praesent pharetra finibus risus a luctus.</p>
				</figcaption>
			</figure>
		</div>
	</section>
</main>

---

Myślę że było by Łatwiej gdybyś doręczył całość jak wspomniał user @VBService!

 

Answer 1

W takiej formie nie jest to możliwe, ponieważ nie ma takiej kombinacji selektorów. Nie możesz wybrać dowolnego elementu DOM

dostępne możliwości w css

Selektor	Opis
div span	Selektor potomków (wszystkie <span>są potomkami a <div>)
div > span	Selektor dziecka (wszystkie <span>są bezpośrednim dzieckiem a <div>)
a ~ span	Ogólny selektor rodzeństwa (wszystkie osoby <span>będące rodzeństwem po znaku <a>)
a + span	Selektor sąsiadującego rodzeństwa (wszystkie <span>bezpośrednio po znaku <a>)

 źródło 

Comments

W takiej formie nie jest to możliwe, ponieważ nie ma takiej kombinacji selektorów. Nie możesz wybrać dowolnego elementu DOM

Selektory, których autor użył działały by, gdyby nie fakt, że próbuje się dostać do rodzeństwa parenta, a nie rodzeństwa elementu docelowego.

Przykład dla selektora #illustrations:checked ~ .portfolio .illustration, tylko z bardziej płaską strukturą HTML (kliknięcie w radio zmienia kolor potomka elementu następującego po tym radio):

https://codepen.io/ScriptyChris/pen/XWjvGQp

---

tylko z bardziej płaską strukturą HTML

 To właśnie pokazuje tabelka