Verwarring css parent children en selectors

[sdk1985]

Is er iemand die mij het volgende kan verduidelijken.

Ik heb een DIV genaamd category-name die onder de pagina div blog-featured valt. In deze div staat de volgende code:

code:

<dd class="category-name">  Categorie: <a href="/wp4/nl/uitleg/videokaart" itemprop="genre">Videokaart</a></dd>

Nu wil ik dus dit specifieke element targetten.

Dat probeer ik met:
.blog-featured .category-name { font-weight:bold;}

Vervolgens wordt alleen de tekst bold, en niet de link.

Doe ik het volgende dan wordt alleen de link bold (en de tekst dus niet)
.blog-featured .category-name a { font-weight:bold;}

Doe ik het volgende dan worden ALLE Links op de pagina bold
.blog-featured .category-name, a { font-weight:bold;}

Ik zit mezelf dus onwijs in de weg want ik had ook al het volgende bedacht:

code:

.blog-featured p, a {
font-family: Georgia,serif;
font-weight: 400;
line-height: 1.5;
}

Wat dus achteraf ALLE links op de site pakt, in plaats van het gewenste effect.

Wat ik wil is niet zo moeilijk:
-Alle elementen van de "p" op de "blog-featured" pagina targetten, inclusief links
-Alle elementen van de div "category-name" op de pagina "blog-featured " bold maken (dus inclusief de link die daar bij staat).

Heb al flink wat gegoogled maar echt duidelijke voorbeelden ben ik niet tegengekomen. Het is altijd net niet wat ik wil.

[FotW]

Waarom niet gewoon:

.blog-featured p,
.blog-featured a {

Dan pak je namelijk niet alle a's op de pagina

Als je een testcase zou maken zouden we met je mee kunnen kijken, want dikke kans dat je elders in je css al een stijl zet op de a's

[ Voor 38% gewijzigd door FotW op 11-06-2014 15:20 ]

[keken]

Volgens mij is dit wat je wilt:

code:

.blog-featured .category-name, 
.blog-featured .category-name a {
font-family: Georgia,serif;
font-weight: 400;
line-height: 1.5;
}

Je moet elke keer na een komma ook de complete 'reeks' plaatsen

[sdk1985]

Aha! Dat verklaart een hoop. Super bedankt:).

Nu doet het wat ik wil:

code:

.blog-featured p, .blog-featured  p a {
font-family: Georgia,serif;
font-weight: 400;
line-height: 1.5;
}

.blog-featured .category-name { font-weight:bold;}

Extra vraagje... Ik zie in de originele css code vaak het volgende:
#s5_search input, #s5_menu_wrap, .s5_mod_h3, #subMenusContainer, h2 {
font-family: Oswald;
}

Wat is nu exact de impact van het hekje?

[dimako_]

# is voor: <div id="">
. is voor <div class="">

een ID is vaak uniek op een pagina en een class mag vaker voor komen.

[ Voor 43% gewijzigd door dimako_ op 11-06-2014 15:38 ]

[NMe]

sdk1985 schreef op woensdag 11 juni 2014 @ 15:35:
Wat is nu exact de impact van het hekje?

Niet om heel vervelend te doen, maar dat vind je op elke CSS-tutorial bij wijze van spreken in de tweede alinea. Vergeet je niet bij het begin te beginnen als je een nieuwe skill wil leren?

[sdk1985]

@dimako_
Thanks.

@NMe
90% van de tutorials kan ik he-le-maal niks mee...

Zie bijvoorbeeld nummer 1 en 2 van google:
http://www.w3schools.com/cssref/sel_class.asp
http://www.w3schools.com/css/css_selectors.asp

Los daarvan ben ik een template aan het aanpassen en moet ik dus het programmeer werk van andere begrijpen voor dat lukt. Dus dan is het vaak een beetje learn as you go en trial en error. De basis is namelijk meestal voorkomen irrelevant in die frameworks. Is in de eerste plaats meteen al shorthand syntax.

Uiteindelijk kom ik er wel uit, alleen de syntax is vaak problematisch.

[ Voor 21% gewijzigd door sdk1985 op 11-06-2014 17:33 ]

[NMe]

sdk1985 schreef op woensdag 11 juni 2014 @ 17:25:
@NMe
90% van de tutorials kan ik he-le-maal niks mee...

Zie bijvoorbeeld nummer 1 en 2 van google:
http://www.w3schools.com/cssref/sel_class.asp
http://www.w3schools.com/css/css_selectors.asp

W3Schools zuigt dan ook. Zie http://w3fools.com.

Los daarvan ben ik een template aan het aanpassen en moet ik dus het programmeer werk van andere begrijpen voor dat lukt. Dus dan is het vaak een beetje learn as you go en trial en error. De basis is namelijk meestal voorkomen irrelevant in die frameworks. Is in de eerste plaats meteen al shorthand syntax.

Eerst lezen, dan pas coden. Dit is bijvoorbeeld wel een goede bron, maar je moet er wel even de tijd voor nemen:
https://developer.mozilla...Guide/CSS/Getting_started

[R4gnax]

sdk1985 schreef op woensdag 11 juni 2014 @ 17:25:
Los daarvan ben ik een template aan het aanpassen en moet ik dus het programmeer werk van andere begrijpen voor dat lukt.

Om het programmeerwerk te begrijpen zul je als nog grip op de materie moeten hebben. Anders kun je ook nooit een oordeel vellen over de correctheid en kwaliteit van wat er reeds ligt, over de beste manier om een wijziging te bewerkstelligen, etc.

(Trouwens; als de samples die je gepost hebt indicatief zijn voor het hele template, dan valt dat template fraai binnen de categorie Kwalitatief Uitermate Teleurstellend.)

[FotW]

Dit is wellicht nog een leuke maniervoor je om css specificiteit te leren begrijpen: http://flukeout.github.io/

[HansvDr]

NMe schreef op woensdag 11 juni 2014 @ 17:33:
[...]

W3Schools zuigt dan ook. Zie http://w3fools.com.


[...]

Toch staat in de tweede link van w3schools prima uitgelegd wat het hekje betekent lijkt mij...

[8088]

Wat daarop volgt is niet zo prima:

Do NOT start an ID name with a number!

Ergo, mijd w3schools.

[NMe]

8088 schreef op zaterdag 14 juni 2014 @ 00:52:
Wat daarop volgt is niet zo prima:

[...]

Ergo, mijd w3schools.

Het is wel degelijk een slecht idee om een ID met een getal te starten hoor. http://css-tricks.com/ids-cannot-start-with-a-number/

Volgens mij kunnen de meeste (zo niet alle) browsers er tegenwoordig wel mee overweg maar ik zou het vermijden.

W3Schools heeft sommige dingen wél gewoon goed. Het kán ook gewoon niet dat ze het altijd fout zouden hebben. Maar omdat je als beginner niet weet wat wél en wat niet goed is kun je er beter ver vandaan blijven.