Links over CSS Classes spans die ik interesant vond

Links over CSS Classes spans die ik interesant vond. Dit is niet echt goed georganiseerd.

https://stackoverflow.com/questions/6987834/how-to-make-an-inline-element-appear-on-new-line-or-block-element-not-occupy-th

https://www.w3schools.com/cssref/tryit.php?filename=trycss_play_grid-auto-columns

Javascript

https://stackoverflow.com/questions/20869531/how-do-i-create-hover-effects-in-html-without-using-a-css-page

<p onmouseover="change(this)" >xxxxx</p>
<script type="text/javascript" >
  function change (element) {
    var style = element.style;
    // Do something with style...
    // Example: style.color = "red";
  }
</script>

Gallery Focus Effect with :not

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

Kaart met CSS en javascript

Mooie kaart met CSS en javascript

See the Pen Beateous Villages by Gabriele Corti (@borntofrappe) on CodePen.

Contain inhoud en tekst

https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text

Meerder CSS classes combineren

Meerder CSS classes combineren bijvoorbeeld claas A en B doe je zo:

https://stackoverflow.com/questions/807415/css-selector-for-an-element-having-class-a-and-class-b

<style>
    div.a ? div.b {
        color:#f00;
    }
</style>
<div class="a">text niet rood</div>
<div class="b">text niet rood</div>
<div class="a b">text rood</div>
<div class="b a">text rood</div>

of:

<style>
div.a {
  color: blue;
}
div.b {
  color: green;
}
div.a.b {
  color: red;
}
</style>
<div class="a">
  A
</div>
<div class="b">
  B
</div>
<div class="a b">
  AB
</div>

x

Stijl op parent ouder toepassen als deze een kind met CSS heeft.

CSS Stijl parent ouder child toepassen

Het is gemakkelijk om stijl toe te passen op een onderliggend element, maar als u stijl wilt toepassen op een bovenliggende klasse die al onderliggende elementen bevat, kunt u de onderliggende combinator van de CSS-selector (>) gebruiken, die tussen twee CSS-selectors wordt geplaatst. Met div > p selecteert u bijvoorbeeld alle p elementen waarvan het bovenliggende element een div element is.

https://www.educative.io/answers/how-to-apply-style-to-parent-if-it-has-a-child-with-css