====== HTML and CSS gotchas ======

===== Change others =====

On a CSS hover event, change another div's styling. Without elements between:
<code>
#a:hover + #b {
    background: #ccc
}
...
<div id="a">Div A</div>
<div id="b">Div B</div>
</code>

On a CSS hover event, change another div's styling. With elements between:
<code>
#a:hover ~ #b {
    background: #ccc
}
...
<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>
</code>

Remove inherited attributes:
<code>
.gtd-button {
    all: unset;
    position: absolute;
    z-index: 10000;
    ...
</code>

===== CSS Selectors =====
^ Selector ^ Example ^ Example description ^
| .class | .intro | "Selects all elements with class=""intro""" | 
| .class1.class2 | "<div class=""name1 name2"">...</div>" | Selects all elements with both name1 and name2 set within its class attribute | 
| .class1 .class2 | "<div class=""name1""> <div class=""name2""> ... </div></div>" | Selects all elements with name2 that is a descendant of an element with name1 | 
| #id | #firstname | "Selects the element with id=""firstname""" | 
| * | * | Selects all elements | 
| element | p | Selects all <p> elements | 
| element,element | div, p | Selects all <div> elements and all <p> elements | 
| element element | div p | Selects all <p> elements inside <div> elements | 
| element>element | div > p | Selects all <p> elements where the parent is a <div> element | 
| element+element | div + p | Selects all <p> elements that are placed immediately after <div> elements | 
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element | 
| [attribute] | [target] | Selects all elements with a target attribute | 
| [attribute=value] | [target=_blank] | "Selects all elements with target=""_blank""" | 
| [attribute~=value] | [title~=flower] | "Selects all elements with a title attribute containing the word ""flower""" | 
| <nowiki>[attribute|=value]</nowiki> | <nowiki>[lang|=en]</nowiki> | "Selects all elements with a lang attribute value starting with ""en""" | 
| <nowiki>[attribute^=value]</nowiki> | <nowiki>"a[href^=""https""]"</nowiki> | "Selects every <a> element whose href attribute value begins with ""https""" | 
| [attribute$=value] | "a[href$="".pdf""]" | "Selects every <a> element whose href attribute value ends with "".pdf""" | 
| [attribute*=value] | "a[href*=""w3schools""]" | "Selects every <a> element whose href attribute value contains the substring ""w3schools""" | 
| :active | a:active | Selects the active link | 
| ::after | p::after | Insert something after the content of each <p> element | 
| ::before | p::before | Insert something before the content of each <p> element | 
| :checked | input:checked | Selects every checked <input> element | 
| :default | input:default | Selects the default <input> element | 
| :disabled | input:disabled | Selects every disabled <input> element | 
| :empty | p:empty | Selects every <p> element that has no children (including text nodes) | 
| :enabled | input:enabled | Selects every enabled <input> element | 
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent | 
| ::first-letter | p::first-letter | Selects the first letter of every <p> element | 
| ::first-line | p::first-line | Selects the first line of every <p> element | 
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | 
| :focus | input:focus | Selects the input element which has focus | 
| :hover | a:hover | Selects links on mouse over | 
| :in-range | input:in-range | Selects input elements with a value within a specified range | 
| :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state | 
| :invalid | input:invalid | Selects all input elements with an invalid value | 
| :lang(language) | p:lang(it) | "Selects every <p> element with a lang attribute equal to ""it"" (Italian)" | 
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent | 
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | 
| :link | a:link | Selects all unvisited links | 
| :not(selector) | :not(p) | Selects every element that is not a <p> element | 
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | 
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | 
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | 
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | 
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent | 
| :optional | input:optional | "Selects input elements with no ""required"" attribute" | 
| :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range | 
| ::placeholder | input::placeholder | Selects input elements with placeholder text | 
| :read-only | input:read-only | "Selects input elements with the ""readonly"" attribute specified" | 
| :read-write | input:read-write | "Selects input elements with the ""readonly"" attribute NOT specified" | 
| :required | input:required | "Selects input elements with the ""required"" attribute specified" | 
| :root | :root | Selects the document's root element | 
| ::selection | ::selection | Selects the portion of an element that is selected by a user | 
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | 
| :valid | input:valid | Selects all input elements with a valid value | 
| :visited | a:visited | Selects all visited links | 

**Order of style applying**: Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity.

===== Internalization =====

  * From: https://www.smashingmagazine.com/2014/06/css-driven-internationalization-in-javascript/
  * {{ :wiki2:css-driven_internationalization_in_javascript_smashing_magazine.pdf |PDF Version}}

<code html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<style type="text/css">
	[data-l11n=ru] {
	    display: none;
	}

	:lang(ru) > [data-l11n] {
	    display: none;
	}

	:lang(ru) > [data-l11n=ru] {
	    display: inline;
	}
	</style>
  </head>
  <body>
	<p>
	  <label>
	    <span data-l11n>Change language:</span>
	    <span data-l11n="ru">Изменить язык:</span>
	    <select onchange="document.documentElement.lang=this.value">
	      <option value="en">English</option>
	      <option value="ru">Русский</option>
	    </select>
	  </label>
	</p>
	<h1>
	  <span data-l11n>Feedback</span>
	  <span data-l11n="ru">Обратная связь</span>
	</h1>
</body>
</html>
</code>

===== SVG =====

==== Using img tag ====
<code>
<img src = "happy.svg" alt="My Happy SVG"/>
</code>

==== Using object tag ====
<code>
<object data="happy.svg" width="300" height="300"> </object>
</code>

==== Add an svg with code directly ====

<code>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</code>

==== Using a file ====
It comes from: https://github.com/feathericons/feather#svg-sprite=

<code>
<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle"/>
</svg>
</code>
==== From a reference in code ====


<code>
<div>
  <svg>
    <use xlink:href="#bike" />
  </svg>
</div>

<svg display="none">
  <symbol width="24" height="24" viewBox="0 0 24 24" id="bike">
    <path d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"></path>
  </symbol>
</svg>
</code>