You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.

In the example below, we have a <div> that contains a note. The grey border is applied when the box has a class of notebox. If it also has a class of warning or danger, we change the border-color.

We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You'll see that the last <div> doesn't get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied.

.notebox {
  border: 4px solid #666;
  margin: 1em 0; 
  padding: .5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

<div class="notebox">
    This is an informational note.
</div>

<div class="notebox warning">
    This note shows a warning.
</div>

<div class="notebox danger">
    This note shows danger!
</div>

<div class="danger">
    This won't get styled — it also needs to have the notebox class
</div>

.CLASS1 .CLASS2

.CLASS1 .CLASS2 = An element with class CLASS2 somewhere within an element with class CLASS1.

Eksempel med buttons styrt av CLASS som er adskilte med mellomrom.

.button {
  color: #FFF;
  background-color: #5995DA;    /* Blue */
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;    /* Dark gray */
  border-radius: 5px;

  width: 200px;
  margin: 20px auto;
}

.call-to-action {
  font-style: italic;
  background-color: #EEB75A;    /* Yellow */
}

<div class="button">Button One</div>

<div class="button call-to-action">Button Two</div>

Overriding occurs because of the order of .call-to-action and .button in our stylesheet. When there’s two conflicting properties in a CSS file, the last one is always the one that gets applied. So, if you moved .call-to-action to the top of styles.css, .button would have the final word on the value of background-color, and it would remain blue.

This means that the order of the class attribute in our HTML element has no effect on override behavior. Multiple classes on a single element are applied “equally” (for lack of a better term), so the precedence is determined solely by the order of the rules in styles.css. In other words, the following elements are effectively equivalent:

<div class="button call-to-action">Button Two</div>

<div class="call-to-action button">Button Two</div>

Arveegenskapene forklart på norsk

Dette blir som ved bruk av lister for å opprette menyer, eksempelvis fra (https://oppgaver.kidsakoder.no/web/layout/layout):

nav ul li{
    float:left;             /* gjør at teksten flyter fra venstre mot høyre */
    list-style-type: none;  /* gjerner punktet foran liste-elementet */
}

Grunnen til at vi skriver nav ul li på denne er for å spesifisere at vi skal sette stil på li (List items) i den uordnede listen ul som ligger innenfor nav-taggen. På denne måten vil ikke andre lister bli påvirket av den stilen vi setter, kun den lista som ligger mellom <nav>-taggen.

.CLASS1, .CLASS2

.CLASS1, .CLASS2 = 1. An element with class CLASS1. 2. An element with class CLASS2.

Tabellen over er lagt til av meg, og sammenfattet fra div, p.

Eksempel styrt av 2 x CLASS, adskilte med kommategn, er en måte å samle elementer som kan stå isolert hver for seg. De deler felles egenskaper, og kan settes opp hver for seg i tillegg med egenskaper som skiller dem.

Ved å samle separate CSS selektorer unngår en å lage store CSS-filer, får det mer oversiktlig

Using Commas to Separate Selectors

Instead of writing 4 separate CSS selectors and 4 rules, you can combine all these styles into one rule property by separating the individual selectors with a comma. Here is how that would be done:

th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }

vs.

th, td, p.red, div#firstred { color: red; }

vs.

th,
td,
p.red,
div#firstred {
  color: red;
}

With this syntax, you are saying that you want th tags, td tags, paragraph tags with the class red, and the div tag with the ID firstred all to have the style color red.

Eksempelvis

In this example we have grouped the selectors

h1 {
  text-align: center;
  color: green;
}

h2 {
  text-align: center;
  color: green;
}

p {
  text-align: center;
  color: green;
}

Tilsvarer følgende når forkortet:

h1, h2, p {
  text-align: center;
  color: green;
}

Gir samme resultat

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

Et annet eksempel

Kan samle det som er felles, og overskrive det som skal skilles ut.

.test-1, 
.test-2,
.test-3,
.test-4,
.test-5{
  color:#F60;
  display:block;
}

.test-3{
  color:blue
}

<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>

#ID

#C

Informasjon om #C:

• Gruppe: Enkle selektorer.
• Styrer: Bestemte elementer med navngitt C.

id Selectors

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black {
  color: #000000;
}

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example:

h1#black {
   color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors, For example:

#black h2 {
   color: #000000;
}

In this example, all level 2 headings will be displayed in black color when those headings will lie within tags having id attribute set to black.

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

#para1 {
  text-align: center;
  color: red;
}

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

ID Selectors

An ID selector begins with a # rather than a dot character, but is used in the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single id value applied to them. It can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}

<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

Warning: Using the same ID multiple times in a document may appear to work for styling purposes, but don't do this. It results in invalid code, and will cause strange behavior in many places.

Note: As we learned in the lesson on specificity, an ID has high specificity. It will overrule most other selectors. In most cases, it is preferable to add a class to an element instead of an ID. However, if using the ID is the only way to target the element — perhaps because you do not have access to the markup and cannot edit it — this will work.

Advarsler

code.tutsplus.com

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage; however, be cautious when using id selectors.

Ask yourself: do I absolutely need to apply an id to this element in order to target it?

id selectors are rigid and don't allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

https://www.tutora.no/hvordan-bruke-class-og-id-i-css/

Du kan ikke bruke mellomrom på id-navn og class-navn og heller ingen spesialtegn som / % ´og lignende. Du kan bruke tall men navnet kan ikke begynne med et tall. 01header går ikke men header01 går. Bindestrek og understrek går fint.

*

*

Informasjon om *:

• Gruppe: Enkle selektorer.
• Styrer: Alle elementer.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS rule below will affect every HTML element on the page:

* {
  text-align: center;
  color: blue;
}

The universal selector.

* matches any element in the page. Used as a whole, not to replace a part of string.

Rather than selecting elements of a specific type, the universal selector simply matches the name of any element type.

The universal selector **

The symbol * represents any element: all classes, id, or markers.

The rule:

* { color:blue; }

applies to <p>, <h1> and all other tags, and any named element.

An asterisk

At appropriate places, an asterisk may be used as a wildcard to select every element.

* { } (all elements)

.parent * { } (all descendants)

.parent > * { } (all children)

VIKTIGE ADVARSLER

code.tutsplus.com

The star symbol

* {
 margin: 0;
 padding: 0;
}

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you never to use this in production code. It adds too much weight on the browser, and is unnecessary.

<ul>
  <li>En (ordinær) liste</li>
  <li>Som nå ikke får noen</li>
  <li>Margin og Padding</li>
</ul>

The * can also be used with child selectors.

#container * {
 background: #c4b1ff;
 border: 1px solid red;
}

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.

Dette påvirker ikke dennes DIV, men absolutt alt av dennes innhold. Andre elementer utenfor blir heller ikke påvirket.

<div id="container">
<h3>Overskrift H3</h3>
<p>Tekst i en P med en <span>SPAN</span> midt i innholdet.</p>
<ul>
  <li>En (ordinær) liste</li>
  <li>Som nå får</li>
  <li>Borders</li>
</ul>
</div>

code.tutsplus.com

Demo of Basic Selectors

PB: Modifisert presentasjon
Originalen:

* {
  font-family: 'Lato';
}

h2 {
  margin: 4rem 0 0 0;
}

div.universal-selector * { border: 1px dotted black; }

div#id-selector {
  background: #e3e3e3;
}

div#x-container li.warning {
  color: red;
} 

div.xtype-selector div {
  border: 1px solid black;
}

<h2>* Selector</h2>
<div class="universal-selector">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

<h2>#X Selector</h2>
<div id="id-selector">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

<h2>.X Selector</h2>
<div id="x-container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li class="warning">Something went Wrong </li>
      <li> List Item 4</li>
   </ul>   
</div>

<h2>X Selector</h2>
<div class="xtype-selector">
<div id="xtype-container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li class="warning">Something went Wrong </li>
      <li> List Item 4</li>
   </ul>   
</div>

<p> Paragraph outside of div </p>
</div>

ELEMENT

E

Informasjon om E:

• Gruppe: Enkle selektorer.
• Styrer: Alle elementer av typen E.

A selector is an HTML tag at which a style will be applied. This could be any tag like <p>, <h1>, or <table> etc.

VIKTIG

Pass på REKKEFØLGEN. En Internal (Embedded) CSS i STYLE vil overstyre en External FIL.CSS, og en inline i teksten vil overstyre dem begge!!!

Generelle

Dette er alle generelle elementer, standard bruk. Stilsettingen virker inn på alle plasseringer på nettsiden, som ikke har eget stilsett.

p {
  font-size: 32pt; font-family: 
   'Brush Script MT',
   'Lucida Calligraphy',
   'Lucida Handwriting',
   OpenDyslexic,
   Karumbi,
   'Apple Chancery',
   cursive;
}

<p>Denne har jeg satt opp for å kunne kjøres på MS Windows, Linux og Apple.</p>

Slå sammen til såkalte Shorthand Properties

Hn

h2 {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 80%;
  line-height: 120%;
  font-family: arial, helvetica, sans-serif;
}

h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }

P

p {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 4em;
}

p { padding: 1em 2em 3em 4em; }

ELEMENT.CLASS

ELEMENT.CLASS = An <element> element with class CLASS.

E.C

Informasjon om E.C:

• Gruppe: Enkle selektorer.
• Styrer: Alle elementer E med klasse C.

Class Selectors in CSS

Fra (tutorialspoint.com)

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule:

.black {
   color: #808000;
}

This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example:

h1.black {
   color: #808000;
}

This rule renders the content in black for only <h1> elements with class attribute set to black.

You can apply more than one class selectors to given element. Consider the following example:

.bold {
   font-weight: bold;
}

.center {
   text-align: center;
}

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Targeting classes on particular elements

Fra (developer.mozilla.org)

You can create a selector that will target specific elements with the class applied. In this next example, we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between.

.highlight {
    background-color: #ccc;
}

h3.highlight {
    background-color: pink;
}

span.highlight {
    background-color: yellow;
}

Her er navnet highlight brukt på forskjellige elementer, med hver sin egenskap.

.highlight

- Står alene og gjelder alle elementer som benytter class="highlight".

h3.highlight

- Kun for alle <h3> som inneholder class="highlight"

span.highlight

- Kun for alle <span> som inneholder class="highlight"

<h3 class="highlight">Class selectors (ROSA)</h3>
<p>Veggies es bonus vobis, proinde vos postulo essum magis 
   <span class="highlight">kohlrabi welsh onion (GUL)</span> 
   daikon amaranth tatsoi tomatillo
   melon azuki bean garlic.</p>

<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. 
   <span class="highlight">Parsley (GUL)</span> shallot courgette tatsoi pea sprouts fava bean collard
   greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. (GRÅ)</p>

To som er satt sammen (w3schools.com)

In this example the <p> element will be styled according to class="center" and to class="large":

p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

Blanding av id og element.class

Alle li som befinner seg i angitt id blir påvirket. I tillegg vil li.favorite kunne skille ut angitt li.

ul#summer-drinks li {
   font-weight: normal;
   font-size: 16px;
   color: green;
}

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

<ul id="summer-drinks">
   <li class="favorite">Coca Cola - Original Taste</li>
   <li>Is-te, gjerne grønn eller lemon</li>
   <li>Vann med isbiter</li>
</ul>

Standard lister blir upåvirket. Og gjenbruk av class="favorite" vil heller ikke virke utenfor navngitt og tilhørende id.

<ul>
   <li class="favorite">Coca Cola - Original Taste</li>
   <li>Is-te, gjerne grønn eller lemon</li>
   <li>Vann med isbiter</li>
</ul>

Endre standard elementer til CLASS, som er samlet

Viktig å huske alle som er felles (komma på en linje).

p, ul { padding-top: 1em; }

.classnavn p, .classnavn ul { padding-top: 1em; }

ELEMENT, ELEMENT

ELEMENT, ELEMENT = 1. An <element>. element. 2. An <element>. element.

Group Selectors

Fra tutorialspoint.com

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>

This defined style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.

You can combine the various id selectors together as shown below:

Denne hadde som eksempel: { position: absolute; left: 510px; width: 200px; }, og dette la alt innholdet opp på hverandre. Egentlig helt meningsløst, så jeg laget derfor eget innhold:

#content, #footer, #supplement {
   font-family: verdana, sans-serif;
   color: #073368;
   background-color: #f6f4ed;
   margin: 4px 40px;
   padding: 2px 24px;
   border: solid 1px #266eb8;
}

Grouping Selectors in CSS

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

Syntax

element, element {
   /*declarations*/
}

Example

article, p, img {
   display: block;
   margin: auto;
   text-align: center;
   border-bottom: double orange;
}

<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img src="https://www.tutorialspoint.com/swing/images/swing.jpg">

Demo Text

This is demo text.

ELEMENT ELEMENT

ELEMENT ELEMENT = An <element> element somewhere within an <element> element.

(E F) Any F element that is a descendant of an E element (that is: a child, or a child of a child, etc.)

Descendant Selector

Fra (håkon.org/wp/avanserte-css-selektorer/)

1. Descendant (etterkommer)-kombinator

Angis med mellomrom og velger elementer i andre selektor som er etterkommere av elementet/elementene i første selektor.

Eksempel:

div p {

}

Velger alle p-elementer som er inne i en div, samme hvor langt nede i hierarkiet de befinner seg.

Nesting

Fra (www.htmldog.com/guides/css/intermediate/grouping/)

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
    background-color: #ccc;
    padding: 1em
}

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}

This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this:

This is because, by separating selectors with spaces, we are saying “h1 inside ID top is colour #ff0” and “p inside ID top is red and bold”.

Fra css.maxdesign.com.au

FRA (http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm)

Gode forklaringer, dog på CSS2, men fortsatt gjeldende. Nettsiden har mange gode og billedliggjorte forklaringer. Plukket ut og utvidet med et eksempel.

em { font-weight: bold; }

ul em { color: blue; }

Fra css-tricks.com

A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here’s some examples:

ul li {  }
header h2  {  }
footer a  {  }
.module div {  }
#info-toggle span  {  }
div dl dt a  {  }

Take ul li { } for example. It means “any list item that is a descendant of an unordered list.”

Descendant means anywhere nested within it in the DOM tree. Could be a direct child, could be five levels deep, it is still a descendant. This is different than a child combinator (>) which requires the element to be the next nested level down.

To illustrate, div span { } will match:

You probably shouldn’t worry about it very much, but the decedent selector is pretty “expensive” – meaning hard/slow for rendering engines to figure out and do stuff with. MDN:

The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.

But only in comparison to other selectors. It’s still blazingly fast and you’ll probably never notice it unless you go crazy.

Descendant Selectors

Fra tutorialspoint.com

The descendant selector in CSS is used to match all elements that are descendants of a specified element. Altså kun etterkommere påvirkes,

div p {
  background-color: orange;
}

Descendent Selectors in CSS

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {
   color: #FFFF00;
}

Suppose now for <ol> element and style rule applied to <strong>:

ol strong {
   color: #808000;
}

The CSS element selector is used to select the descendant of first element with element name matching the second selector.

Syntax

The syntax for CSS descendant selector is as follows -

element element {
  /*declarations*/
}

Example

div {
   float: right;
   margin: 25px;
   padding: 5px;
   width: 80px;
   height: 80px;
   border: solid aqua;
}
div div {
   border-color: blue;
   border-radius: 50%;
}
div div div {
   border-color: orange;
   border-radius: unset;
}

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

Denne var ikke lett å kopierer som inline CSS, derfor ligger dette kun som et bilde.

Fake resultat

Example

li li {
   background-color: lightsteelblue;
}

Fra forum

Just think of what the words "child" and "descendant" mean in English (fra forum):

• My daughter is both my child and my descendant.
• My granddaughter is not my child, but she is my descendant.

code.tutsplus.com

5. X Y

li a {
  text-decoration: none;
}

The next most common selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector.

Pro-tip: If your selector looks like X Y Z A B.error, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight.

ELEMENT > ELEMENT

ELEMENT1 > ELEMENT2 = An <element2> element directly within an <element1> element.

E > F

Informasjon om E > F:

• Gruppe: Kombinerte selektorer.
• Styrer: Elementer F som er direkte barn av E.

(E > F) Any F element that is a child of an E element.

Child Combinator

div > p {
  color: #009900;
  margin:3px;
  border: 4px solid #339933;
}

2. Child (Barn)-kombinator

FRA håkon.org/wp/avanserte-css-selektorer/

Angis med tegnet > og velger elementer som er umiddelbare barn av noe.

Eksempel:

div > p {

}

Velger alle p-elementer som er umiddelbare barn av en div. Det vil si at et p-element plassert inne i en ny div ikke velges PB: Feil! Den vil være en P i sin DIV.

Eksempel med utgangspunkt i CSS-en over:

<div>
  <span id="en"></span>
  <span id="to">
    <span id="tre"></span>
  </span>
  <span id="fire"></span>
</div>

CSS-regelen div > span {} vil gjelde for p-elementene med id “en”, “to og “fire”, men ikke “tre” siden den ikke er et umiddelbart barn av en div. Bruker man derimot descendant-selektoren (div span {}) vil den gjelde for alle fire span-elementene.

Fra css-tricks.com

A child combinator in CSS is the “greater than” symbol, it looks like this:

ol > li {
  color: red;
}

It means “select elements that are direct descendants only”. In this case: “select list items that are direct descendants of an ordered list”. To illustrate:

Try removing the > symbol when playing around with ...(Altså: )

ol li {
  color: red;
}

Also Known As

The child combinator is what the spec calls it, but you’ll also hear it called:

• child selector
• direct descendent selector
• direct descendant combinator

Fra stackoverflow.com forum

Which <p>s are selected by which selectors?

First off, all of them match div p because they are <p> elements situated anywhere within a <div> element.

That makes div > p more specific, which begs the next question:

Which <p>s are selected by div > p?

1. Selected

   This paragraph <p> is a child, or a direct descendant, of the outermost <div>. That means it's not immediately contained by any other element than a <div>. The hierarchy is as simple as the selector describes, and as such it's selected by div > p.

2. Not selected

   This <p> is found in a <blockquote> element, and the <blockquote> element is found in the outermost <div>. The hierarchy would thus look like this:

   div > blockquote > p
   

   As the paragraph is directly contained by a blockquote, it's not selected by div > p. However, it can match blockquote > p (in other words, it's a child of the <blockquote>).

3. Selected

   This paragraph lives in the inner <div>, which is contained by the outer <div>. The hierarchy would look like this:

   div > div > p
   

   It doesn't matter if there are more <div>s nested within each other, or even if the <div>s are contained by other elements. As long as this paragraph is directly contained by its own <div>, it will be selected by div > p.

Fra lifewire.com

What Is a CSS Selector?

CSS relies on pattern matching rules to determine which style applies to which element in the document.

These patterns are called selectors and they range from tag names (for example, p to match paragraph tags) to very complicated patterns that match very specific parts of a document.

For example, p#myid > b.highlight would match any p tag with a class of highlight that is a child of the paragraph with the id myid.

Fra tutorialspoint.com

The CSS child selector is used to select all child elements with a particular parent element.

Syntax

element > element {
/*declarations*/
}

Example

div {
   margin: auto;
   width: 200px;
   padding: 30px;
   background-color: moccasin;
}
div > div {
   box-shadow: inset 0 0 8px mediumseagreen;
   border-top-right-radius: 50%;
   border-bottom-left-radius: 50%;
}

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

DIV

DIV i DIV

Fra forum

In theory: Child => an immediate descendant of an ancestor (e.g. Joe and his father)

Descendant => any element that is descended from a particular ancestor (e.g. Joe and his great-great-grand-father)

In practice: try this:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

PB: Modifisert

Fra nok et forum

This example illustrates the difference:

div span{background:red}
div>span{background:green}

<div style="color: white;">
<span>abc</span>
<span>def<span>ghi</span></span>
</div>

Background color of abc and def will be green, but ghi will have red background color.

IMPORTANT: If you change order of the rules to:

div>span{background:green}
div span{background:red}

All letters will have red background, because descendant selector selects child's too.

<div style="color: white;">
<span>abc</span>
<span>def<span>ghi</span></span>
</div>

code.tutsplus.com

7. X > Y

div#container > ul {
  border: 1px solid black;
}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

PB: Modifisert

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.

For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.

ELEMENT + ELEMENT

ELEMENT1 + ELEMENT2 = An <element2> element directly adjacent to an <element1> element.

E + F

Informasjon om E + F:

• Gruppe: Kombinerte selektorer.
• Styrer: Elementer F som kommer rett etter E.

(E + F) Any F element that is the next sibling of a E element (that is: the next child of the same parent)

Adjacent Sibling Selectors in CSS

div + p {
  color: #009900;
  margin:3px;
  border: 4px solid #339933;
}

<div>Første DIV</div>
<p>Første P etter DIV</p>
<div>
<div>Andre DIV, med P</div>
<p>P inne i en DIV</p>
</div>
<p>Første P etter DIV</p>
<p>Første P etter P</p>

FRA håkon.org/wp/avanserte-css-selektorer/

3. Adjacent sibling (etterfølgende søsken)-kombinator

Angis med + og velger elementer som er nærmeste etterfølgende søsken av noe.

Eksempel:

h2 + p {

}

Velger alle p-elementer som er nærmeste etterfølgende søsken av en h2, f.eks. p-elementet i denne koden:

<div>
  <h2>Overskrift</h2>
  <p>Avsnitt</p>
</div>

Fra css-tricks.com

The adjacent sibling combinator in CSS isn’t a selector on its own, but a way of combining two selectors. For example:

p + p {
  margin: 0;
}

The plus sign (+) is the adjacent sibling combinator, between two paragraph tag (element) selectors. What this means is “select any paragraph tag that is directly after another paragraph tag (with nothing in between)”. Here’s some examples of what it would select:

PB: Modifisert

This is mostly useful for when using semantic markup and needing to adjust for certain scenarios in which elements are directly next to each other.

Fra stackoverflow.com (forum)

.w100 + .w50 {
  border: 2px red solid;
}

<div>
  <img src="http://placehold.it/100" class="w100" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/100" class="w100" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/50" class="w50" />
</div>

PB: GENIAL måte å vise BILDESTØRRELSER uten å ha bildene!!!

PB: Det var også denne som ga meg tanken om å ha HR på sidene, der de er parvis, farget forskjellig.

hr {
	margin: 1.8em 0;
	display: block;
	height: 2px;
	border: 0;
	border-bottom: 5px solid #65a37f;
	outline: none;
}

hr + hr
{
    margin: 1.8em 0;
	display: block;
	height: 2px;
	border: 0;
	border-bottom: 5px solid orange;
	outline: none;
}

Fra w3resource.com (Adjacent sibling selectors)

h1+h2 {color:red}

<h1>w3resource CSS examples</h1>
<h2>w3resource CSS CSS adjacent selectors examples</h2>

Fra tutorialspoint.com

The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector.

Syntax

element + element {
   /*declarations*/
}

Example

div {
   margin: 8px;
   height: 50px;
   width: 60px;
   display: flex;
   float: left;
   border-radius: 5%;
   border: 2px solid brown;
   box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
   border-radius: 50%;
   background-color: orchid;
}

Måtte også sette følgende etter første DIV-slutt samt den helt siste, grunnet FLOAT:

<br style='content: ""; clear: both; display: table;' />

Måtte også sette følgende for å resette og ikke arve HR egenskapene satt i CSS:

<hr style="all:revert;" />

<div></div>
<hr>
<div></div>
<div></div>

Example

p {
   font-size: 1.5em;
}
span {
   background-color: lavender;
}
span + span {
   background-color: darkseagreen;
}

X + Y (Fra code.tutsplus.com)

ul + p {
   color: red;
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

Her var det ingen eksempler så jeg laget en egen test.

<p>Tekst 0, før UL liste</p>
<ul>
  <li>Linje 1</li>
  <li>Linje 2</li>
  <li>Linje 3</li>
</ul>
<p>Tekst 1, rett etter UL liste</p>
<p>Tekst 2, etter en P etter UL liste</p>

ELEMENT ~ ELEMENT

ELEMENT1 ~ ELEMENT2 = An <element2> element after an <element1> element.

E ~ F

Informasjon om E ~ F:

• Gruppe: Kombinerte selektorer.
• Styrer: Elementer F som kommer etter E.

General Sibling Selectors in CSS

Eksempel: DIV ~ P

div ~ p {
  color: #009900;
  margin:3px;
  border: 4px solid #339933;
}

<div>Første DIV</div>
<p>Første P etter DIV</p>
<div>
<div>Andre DIV, med P</div>
<p>P inne i en DIV</p>
</div>
<p>Første P etter DIV</p>
<p>Første P etter P</p>

FRA håkon.org/wp/avanserte-css-selektorer/

4. General sibling (søsken)-kombinator

h2 ~ p {

}

Velger alle p-elementer som er etterfølgende søsken av en h2, men ikke nødvendigvis umiddelbart etterfølgende. Merk at eventuelle p-elementer som ligger før et h2-element, ikke velges. Med CSS-koden over, og HTML-koden under, vil dermed p-elementene med id “to”, “tre” og “fem” velges.

Merk at det ikke finnes noen parent-selektor for å velge elementer som er foreldre.

<p id="en">Avsnitt</p>
<h2>Overskrift</h2>
<p id="to">Avsnitt</p><span>Tekst</span>
<p id="tre">Avsnitt</p>
<div>
  <p id="fire">Avsnitt</p>
</div>
<p id="fem">Avsnitt</p>

X ~ Y (Fra css-tricks.com)

General sibling combinator

The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it.

If we use the same example structure as above, the last <p> element will be selected by p ~ p as well, because it is preceded by another <p> element, even though not directly.

Note that in both the general sibling and adjacent sibling selectors the logic takes place within the same parent element. That’s what siblings means… sharing the same parent. In the graphical examples above, that’s what the wrapping <div> is there for. If there was another <p> element after that <div>, it would still be selected by both div ~ p and div + p though, as it would be a sibling and an adjacent sibling to that <div>.

Test med (div ~ p)

<p>Line One</p>
<p>Line Two</p>
<div>Box</div>
<p>Line Three</p>

Test med (p ~ p)

<p>Line One</p>
<p>Line Two</p>
<div>Box</div>
<p>Line Three</p>

The general sibling combinator (~) in CSS looks like this in use:

.featured-image ~ p {
  font-size: 90%;
}

In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of “featured-image”) and making them of slightly smaller font-size.

This selects elements at the same hierarchy level. In this example .featured-image and the p elements are at the same hierarchy. If the selector continued past the p or before .featured-image, the normal rules apply. So .featured-image ~ p span still would select spans that are descendents of whatever .featured-image ~ p matches.

The spec for selectors level 4 calls these “Following Sibling Combinators”.

Here’s another example that highlights all of the p elements that follow an img:

img ~ p {
  background-color: #FEF0B6;
  padding: 5px;
}

<p><strong>This paragraph will not be selected.</strong> Bla bla bla bla bla bla bla bla.</p>
<img src="bilder/testing-bilde_asus.png" alt="" />
<p><strong>This paragraph will be selected.</strong> Bla bla bla bla bla bla bla bla.</p>
<p><strong>And this paragraph will also be selected.</strong> Bla bla bla bla bla bla bla bla.</p>

This paragraph will not be selected. Bla bla bla bla bla bla bla bla.

This paragraph will be selected. Bla bla bla bla bla bla bla bla.

And this paragraph will also be selected. Bla bla bla bla bla bla bla bla.

X ~ Y (Fra tutorialspoint.com)

The CSS general sibling selector is used to select all elements that follow the first element such that both are children of the same parent.

Syntax

element ~ element {
   /*declarations*/
}

Example

* {
   float: left;
   padding-left: 14px;
   list-style: none;
}
p ~ ul {
   box-shadow: inset 4px 0 3px lime;
}

<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>

Tilleggsinfo for eksemplene

Her er det benyttet float: left; for å få P og IMG på en linje. I tillegg har jeg lagt inn en avsluttende DIV (som kan stå uten tekst, eksempelvis med en class=clearfix), grunnet bruk av FLOAT. Der er det brukt en ::after.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Example

* {
   float: left;
   padding: 10px;
   list-style: none;
}
img ~ p {
   background-color: burlywood;
}

<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>

This is demo text.

Learn Big Data Analytics at no cost.

X ~ Y (Fra code.tutsplus.com)

ul ~ p {
  color: red;
}

This sibling combinator is similar to X + Y, but it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

Demo of Combinator Selectors

En OPPSUMMERENDE SAMLING med de forskjellige variantene.

PB: Modifisert presentasjon
Originalen:

* {
  font-family: "Lato";
}

h2 {
  margin: 4rem 0 0 0;
}

div.xy-selector div p {
  color: red;
}

div#adj-container ul + p {
  color: red;
}

div#direct-container > ul {
  border: 1px solid black;
}

div#sib-container ul ~ p {
  color: red;
}

Eksempel med E F

<h2>X Y Selector</h3>
<div class="xy-selector">
<div id="xy-container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li class="warning">Something went Wrong </li>
      <li> List Item 4</li>
   </ul>   
</div>

<p> Paragraph outside of div </p>
</div>

Eksempel med E + F

<h2>X + Y Selector</h2>
<div id="adj-container">
  <ul>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

Eksempel med E > F

<h2>X > Y Selector</h2>

<div id="direct-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

Eksempel med E ~ F

<h2>X ~ Y Selector</h2>
<div id="sib-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

[ATTRIBUTE]

[ATTRIBUTE] = An element with an attribute ATTRIBUTE.

Informasjon om E[A]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt.

Atributt-selektorer

Eksempelvis:

alt

class

for

height

href

id

lang

name

role

src

style

title

type

value

width

FRA håkon.org/wp/avanserte-css-selektorer/

Atribute selectors

Atributt-selektorer velger elementer med en gitt atributt og eventuelt også en gitt verdi.

Eksempler:

[class] {

}

velger alle elementer med class-attribute,

a[class] {

}

velger alle a-elementer med class-attribute,

input[type="text"] {

}

velger alle input-elementer med type-attribute som er av typen text.

Substring Matching Attribute Selectors

Velger elementer som inneholder tekst i en atributt som matcher. Bra støttet i browsere, inkl. IE7.

^ = begynner med

$ = slutter på

* = inneholder.

Syntaks

[attribute^=”value”]. Sett tegnet rett etter attributtnavnet og angi verdien (tekststrengen) som skal matches.

Eksempel:

a[href^="http://"] {
 color: green;
 }

Eksemplet over setter tekstfarge på alle linker med href som starter med http://. Nyttig for å f.eks. visuelt skille mellom eksterne og interne (som ikke begynner på http, men bruker en relativ bane.) Andre nyttige bruksområder er f.eks. å style mail-linker annerledes enn vanlige linker med a[href^=”mailto:”] { };.

Eksempel 2:

a[href$=".pdf"] {
 background: url(pdf-icon.png) no-repeat 0 2px;
 padding-left: 25px;
 }

Eksemplet over legger inn et bilde av et pdf-symbol foran alle linker til pdf-dokumenter. Slik kan man enkelt legge til symboler for ulike dokumenttyper.

Eksempel 3:

img[src="thumb"] {
 border: 1px solid white;
}

Eksemplet over gir alle bilder med src, f.eks. filnavn, som inneholder ordet “thumb” en hvit ramme (kantlinje).

https://flaviocopes.com/css-attribute-selectors/

We can check if an element has an attribute using the [] syntax. p[id] will select all p tags in the page that have an id attribute, regardless of its value:

p[id] {
  /* ... */
}

Inside the brackets you can check the attribute value using =, and the CSS will be applied only if the attribute matches the exact value specified:

p[id="my-id"] {
  /* ... */
}

While = let us check for exact value, we have other operators:

• *= checks if the attribute contains the partial
• ^= checks if the attribute starts with the partial
• $= checks if the attribute ends with the partial
• |= checks if the attribute starts with the partial and it’s followed by a dash (common in classes, for example), or just contains the partial
• ~= checks if the partial is contained in the attribute, but separated by spaces from the rest

All the checks we mentioned are case sensitive.

Attribute selectors (css-tricks.com)

Attribute selectors are case-sensitive by default, and are written inside brackets [].

The Seven Different Types

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

Value contains: attribute value contains a term as the only value, a value in a list of values, or as part of another value. To use this selector, add an asterisk (*) before the equals sign. For example, img[alt*="art"] will select images with the alt text “abstract art” and “athlete starting a new sport”, because the value “art” is in the word “starting”.

Value is in a space-separated list: value is either the only attribute value, or is a whole value in a space-separated set of values. Unlike the “contains” selector, this selector will not look for the value as a word fragment. To use this selector, add a tilde (~) before the equals sign. For example, img[alt~="art"] will select images with the alt text “abstract art” and “art show”, but not “athlete starting a new sport” (which the “contains” selector would select).

Value starts with: attribute value starts with the selected term. To use this selector, add a caret (^) before the equals sign. Don’t forget, case-sensitivity matters. For example, img[alt^=”art”] will select images with the alt text “art show” and “artistic pattern”, but not an image with the alt text “Arthur Miller” because “Arthur” begins with a capital letter.

Value is first in a dash-separated list: This selector is very similar to the “starts with” selector. Here, the selector matches a value that is either the only value or is the first in a dash-separated list of values. To use this selector, add a pipe character (|) before the equals sign. For example, li[data-years|="1900"] will select list items with a data-years value of “1900-2000”, but not the list item with a data-years value of “1800-1900”.

Value ends with: attribute value ends with the selected term. To use this selector, add a dollar sign ($) before the equals sign. For example, a[href$="pdf"] selects every link that ends with .pdf.

Combining them

You can combine an attribute selector with other selectors, like tag, class, or ID.

div[attribute="value"] {
  /* style rules here */
}

.module[attribute="value"] {
  /* style rules here */
}

#header[attribute="value"] {
  /* style rules here */
}

Or even combine multiple attribute selectors. This example selects images with alt text that includes the word “person” as the only value or a value in a space separated list, and a src value that includes the value “lorem”:

img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

Fra tutorialspoint.com

You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text:

input[type = "text"]{
   color: #000000;
}

The following are the rules applied to attribute selector:

• p[lang] - Selects all paragraph elements with a lang attribute.
• p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".
• p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".
• p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

Styling Forms with CSS Attribute Selectors

Example

body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
   width: 300px;
   display: block;
   margin-bottom: 10px;
   background-color: rgb(195, 250, 247);
   font-size: 18px;
   padding: 15px;
   border: none;
}
input[type="submit"] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}
input[type="password"] {
   width: 300px;
   padding: 10px;
   background-color: red;
   color: white;
   border: none;
}

<h1>Css attribute selector example</h1>
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">Password:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="Submit" />
</form>

Gjøre om FORM til CLASS

Eksempelvis:

input[type="submit"] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}

input.class-i-form[type="submit"] {
   padding: 10px;
   font-size: 18px;
   border: none;
   outline: none;
   background-color: rgb(75, 163, 16);
   color: white;
}

<input type="submit" style="class-i-form" value="Submit" />

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute] Selector: This type of attribute selector is used to select all the elements that have the specified attribute and applies the CSS property to that attribute.

For example the selector [class] will select all the elements with the style attribute.

Example:

[class] { 
                text-align:center; 
                Color:green; 
            } 
            .gfg { 
                font-size:40px; 
                font-weight:bold; 
                margin-bottom:-20px; 
            }

<div class = "gfg">GeeksforGeeks</div>
<p class = "geeks">A computer science portal for geeks</p>

This selector is used to restrict some particular elements, then it needs to specify that element before the attribute selector.

Example:

div[style] { 
                text-align:center; 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                margin-bottom:-20px; 
            } 
            p { 
                text-align:center; 
                font-size:17px; 
            }

<div style = "color:green">GeeksforGeeks</div>
<p>A computer science portal for geeks</p>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

code.tutsplus.com

Attribute Selectors

9. X[title]

a[title] {
   color: green;
}

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But what if you need to be more specific? Check out the next example!

10. X[href="foo"]

a[href="https://code.tutsplus.com"] {
  color: #83b348; /* Envato green */
}

The snippet above will style all anchor tags which link to https://code.tutsplus.com; they'll receive our branded green color. All other anchor tags will remain unaffected.

Note that we're wrapping the value in quotes. Remember to also do this when using a JavaScript CSS selector engine. When possible, always use CSS3 selectors over unofficial methods.

This works well, although it's a bit rigid. What if the link does indeed direct to Envato Tuts+, but maybe the path is code.tutsplus.com rather than the full URL? In those cases, we can use a bit of the regular expressions syntax.

11. X[href*="foo"]

a[href*="tutsplus"] {
  color: #83b348; /* Envato green */
}

There we go; that's what we need. The star designates that the proceeding value must appear somewhere in the attribute's value. That way, this covers tutsplus.com, code.tutsplus.com, and even webdesign.tutsplus.com.

Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the string tutsplus in the URL? When you need to be more specific, use ^ and $, to reference the beginning and end of a string, respectively.

12. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Ever wonder how some websites are able to display a little icon next to the links which are external? I'm sure you've seen these before; they're nice reminders that the link will direct you to an entirely different website.

This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have an href which begins with http, we could use a selector similar to the snippet shown above.

Notice that we're not searching for https://; that's unnecessary, and doesn't account for the URLs that begin with https://.

Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let's search for the end of the string.

13. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an image—or at least a URL that ends with .jpg. Keep in mind that this won't capture GIF and PNG images.

14. X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

How do we compensate for all of the various image types? Well, we could create multiple selectors, such as:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

But that's a pain, and it's inefficient. Another possible solution is to use custom attributes. What if we added our own data-filetype attribute to each anchor that links to an image?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Then, with that hook in place, we can use a standard attributes selector to target only those anchors.

a[data-filetype="image"] {
   color: red;
}

15. X[foo~="bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Here's a special one that'll impress your friends. Not too many people know about this trick. The tilde (~) symbol allows us to target an attribute which has a space-separated list of values.

Going along with our custom attribute from number 15, above, we could create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we'll make note of external links and links to images—just for the example.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Pretty nifty, huh?

Live Demo of Attribute Selectors

* {
  font-family: "Lato";
}

h2 {
  margin: 4rem 0 0 0;
}

div#aatr-container a[title] {
  color: green;
}

div#batr-container a[href="http://net.tutsplus.com"] {
  color: #1f6053;
}

div#catr-container a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
} 

div#datr-container a[href^="http"] {
         color: red;
      }  

div#eatr-container a[href$=".jpg"] {
         color: red;
      } 

div#fatr-container a[data-filetype="image"] {
      color: red;
    }

Har delt opp og presentert ett og ett eksempel, fra listen over, nedenfor:

Eksempel A:   X[title]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#aatr... eventuelt kun #aatr... med HTML ID="aatr-container", eller CSS .aatr... med HTML CLASS="aatr-container".

div#aatr-container a[title] {
  color: green;
}

ALTERNATIVT:

.aatr-container a[title] {
 color: green;
}

<h2>X[title] Selector</h2>
<div id="aatr-container">
  <ul>
    <li>List Item
    <ul>
      <li>Child</li>
    </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> etc.</p>
  <p>Bla bla bla bla bla etc.</p>
  <p>Bla bla <a href="#">adipisicing</a> bla etc.</p>
  <p>Bla bla bla bla bla etc.</p>
</div>

Eksempel B:   X[href="foo"]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#batr... eventuelt kun #batr... med HTML ID="batr-container", eller CSS .batr... med HTML CLASS="batr-container".

div#batr-container a[href="http://net.tutsplus.com"] {
  color: #1f6053;
}

ALTERNATIVT:

.batr-container a[href="http://net.tutsplus.com"] {
 color: green;
}

<h2>X[href="foo"] Selector</h2>
<div id="batr-container">
      <ul>
         <li> List Item
         <ul>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> 
  og <a href="http://nettuts.com">Nettuts</a>.</p>
  <p>Bla, <a href="#">adipisicing</a> bla bla etc.</p>
  <p>Bla, <a href="http://net.tutsplus.com">Nettuts+</a> etc.</p>
  <p>Bla bla bla bla bla etc.</p>
</div>

Eksempel C:   X[href*="nettuts"]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#catr... eventuelt kun #catr... med HTML ID="catr-container", eller CSS .catr... med HTML CLASS="catr-container".

div#catr-container a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

ALTERNATIVT:

.catr-container a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

<h2>X[href*="nettuts"] Selector</h2>
<div id="catr-container">
  <ul>
    <li>List Item
    <ul>
      <li>Child</li>
    </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> 
  og <a href="http://nettuts.com">Nettuts</a>.</p>
  <p>Bla, <a href="#">adipisicing</a> bla bla etc.</p>
  <p>Bla, <a href="http://net.tutsplus.com">Nettuts+</a> etc.</p>
  <p>Bla bla bla bla bla etc.</p>
</div>

Eksempel D:   a[href^="http"]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#datr... eventuelt kun #datr... med HTML ID="datr-container", eller CSS .datr... med HTML CLASS="datr-container".

div#datr-container a[href^="http"] {
  color: red;
}

ALTERNATIVT:

.datr-container a[href^="http"] {
  color: red;
}

<h2>a[href^="http"] Selector</h2>
<div id="datr-container">
  <ul>
    <li>List Item
    <ul>
      <li>Child</li>
    </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> 
  og <a href="http://nettuts.com">Nettuts</a>.</p>
  <p>Bla, <a href="#">adipisicing</a> bla bla etc.</p>
  <p>Bla, <a href="http://net.tutsplus.com">Nettuts+</a> etc.</p>
  <p>Bla bla bla bla bla etc.</p>
</div>

Eksempel E:   X[href$=".jpg"]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#eatr... eventuelt kun #eatr... med HTML ID="eatr-container", eller CSS .eatr... med HTML CLASS="eatr-container".

div#eatr-container a[href$=".jpg"] {
  color: red;
}

ALTERNATIVT:

.eatr-container a[href$=".jpg"] {
  color: red;
}

<h2>X[href$=".jpg"] Selector</h2>
<div id="eatr-container">
  <ul>
    <li>List Item
    <ul>
      <li>Child</li>
    </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> 
  og <a href="http://nettuts.com">Nettuts</a>.</p>
  <p>Bla, <a href="#">adipisicing</a> bla bla etc.</p>
  <p>Bla, <a href="http://net.tutsplus.com">Nettuts+</a> 
  og "<a href="httpxxxx://d2...../preview.jpg">Getting Good with Git</a>".</p>
  <p>Bla bla bla bla bla etc.</p>
</div>

Eksempel F:   X[foo~="bar"]

(code.tutsplus.com)

Her er det mulig å bruke enten CSS div#fatr... eventuelt kun #fatr... med HTML ID="fatr-container", eller CSS .fatr... med HTML CLASS="fatr-container".

div#fatr-container a[data-filetype="image"] {
  color: red;
}

ALTERNATIVT:

.fatr-container a[data-filetype="image"] {
  color: red;
}

<h2>X[foo~="bar"] Selector</h2>
<div id="fatr-container">
  <ul>
    <li>List Item
    <ul>
      <li>Child</li>
    </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>Bla, <a href="#" title="Some title">consectetur</a> 
  og <a href="http://nettuts.com">Nettuts</a>.</p>
  <p> <a href="httpxxxx://d2...../preivew.png" data-filetype="image">PNG Image</a>.</p>
  <p>Bla, <a href="#">adipisicing</a> bla bla etc.</p>
  <p>Bla, <a href="http://net.tutsplus.com">Nettuts+</a> 
  og "<a href="httpxxxx://d2...../preview.jpg" data-filetype="image">Getting Good with Git</a>".</p>
</div>

[ATTRIBUTE=VALUE]

[ATTRIBUTE=VALUE] = An element with an attribute ATTRIBUTE whose value is VALUE.

Informasjon om E[A=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt med verdien B.

[target=_blank]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><a href="http://nettside.no" target="_blank">Link, åpnes i nytt vindu</a></li>
  <li><img src="img/flower.jpg" alt="my flowers" title="flower" style="width:104px;height:142px;" /></li>
  <li><a href="https://nettside.no/photos/"><img src="flower.gif" alt="flower"></a></li>
  <li><a href="navneliste.pdf">Link til en PDF-navneliste</a></li>
  <li><a href="http://www.w3schools.com/lib/w3.css">CSS-filen til W3</a></li>
</ol>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.

img[alt=Jonas]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="hedda.jpg" alt="Hedda"></li>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jonasen"></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute = “value”] Selector: This selector is used to select all the elements whose attribute has the value exactly same as the specified value.

Example:

[title = "gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [title = "geeks"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div title = "gfg">GeeksforGeeks</div>
<p title = "geeks">A computer science portal for geeks</p>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

developer.mozilla.org: Images, media, and form elements

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: #333;
}

<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

Inheritance and form elements

In some browsers, form elements do not inherit font styling by default. Therefore if you want to be sure that your form fields use the font defined on the body, or on a parent element, you should add this rule to your CSS.

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
} 

[ATTRIBUTE~=VALUE]

[ATTRIBUTE~=VALUE] = An element with an attribute ATTRIBUTE whose value is a space-separated list of values, one of which is VALUE.

Informasjon om E[A~=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt der verdien B forekommer i sin helhet eller er adskilt med tilstøtende åpent mellomrom.

img[title~=flower]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><a href="http://nettside.no" target="_blank">Link, åpnes i nytt vindu</a></li>
  <li><img src="img/flower.jpg" alt="my flowers" title="flower" style="width:104px;height:142px;" /></li>
  <li><a href="https://nettside.no/photos/"><img src="flower.gif" alt="flower"></a></li>
  <li><a href="navneliste.pdf">Link til en PDF-navneliste</a></li>
  <li><a href="http://www.w3schools.com/lib/w3.css">CSS-filen til W3</a></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute~=”value”] Selector: This selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.

Example:

[class~="gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [class~="geeks"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div class = "gfg">GeeksforGeeks</div>
<div Class = "geeks">A computer science portal for geeks
</div>
<div class = "geeks ide">GeeksforGeeks is coding platform
</div>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.
• Med img[alt~=verdien] vil vi formatere hvis verdien finnes i sin helhet i alt-attributtet.

img[alt~=Jonas]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="hedda.jpg" alt="Hedda"></li>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jonasen"></li>
</ol>

Fra forum: stackoverflow.com som jeg har utvidet og tilpasset.

[attribute*=bar] {
  background: lightgray;
}

[attribute~=bar] {
  border: 2px solid red;
}

<div>no attribute</div>
<div attribute="bar">attribute="bar"</div>
<div attribute="foo">attribute="foo"</div>
<div attribute="foobar">attribute="foobar"</div>
<div attribute="foo bar">attribute="foo bar"</div>
<div attribute="foo barbaz">attribute="foo barbaz"</div>
<div attribute="foo bar baz">attribute="foo bar baz"</div>

[ATTRIBUTE|=VALUE]

[ATTRIBUTE|=VALUE] = An element with an attribute ATTRIBUTE whose value is an hyphen-separated list of values, one of which is VALUE.

Informasjon om E[A|=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt der første verdien av B forekommer, i sin helhet eller også er adskilt med bindestrek.

[lang|=en]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><span lang="en">One, two and three</span></li>
  <li><span lang="en-gb">The Oxford comma: one, two and three</span></li>
  <li><span lang="en-us">The serial comma: one, two, and three</span></li>
  <li><span lang="us">One, two, and three</span></li>
  <li><span lang="es">Uno, dos y tres.</span></li>
  <li><span lang="no">En, to og tre.</span></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute|=”value”] Selector: This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.

Example:

[class|="gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [class|="geeks"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div class = "gfg">GeeksforGeeks</div>
<div Class = "geeks-ide">A computer science portal for geeks
</div>
<div class = "geeks-ide1">GeeksforGeeks is coding platform
</div>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.
• Med img[alt|=verdien] vil vi formatere hvis verdien finnes i sin helhet eller også etterfølges av en bindestrek i alt-attributtet.

PB: Denne har jeg utvidet med flere eksmepler

img[alt|=Jonas]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jonasen"></li>
  <li><img src="ole-jonas_hansen.jpg" alt="Ole-Jonas Hansen"></li>
  <li><img src="ole_jonas-hansen.jpg" alt="Ole Jonas-Hansen"></li>
</ol>

[ATTRIBUTE^=VALUE]

[ATTRIBUTE^=VALUE] = An element with an attribute ATTRIBUTE whose value starts with VALUE.

Informasjon om E[A^=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt der verdien begynner med B.

a[href^="https"]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><a href="http://nettside.no" target="_blank">Link, åpnes i nytt vindu</a></li>
  <li><img src="img/flower.jpg" alt="my flowers" title="flower" style="width:104px;height:142px;" /></li>
  <li><a href="https://nettside.no/photos/"><img src="flower.gif" alt="flower"></a></li>
  <li><a href="navneliste.pdf">Link til en PDF-navneliste</a></li>
  <li><a href="http://www.w3schools.com/lib/w3.css">CSS-filen til W3</a></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute^=”value”] Selector: This selector is used to select all the elements whose attribute value begins with the specified value. The value doesn’t need to be a whole word.

Example:

[class^="gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [class^="geeks"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div class = "gfg">GeeksforGeeks</div>
<div Class = "geeks">A computer science portal for geeks
</div>
<div class = "geekside">GeeksforGeeks is coding platform
</div>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.
• Med img[alt~=verdien] vil vi formatere hvis verdien starter med ordet i alt-attributtet.

img[alt^=Jon]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="hedda.jpg" alt="Hedda"></li>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jonasen"></li>
</ol>

[ATTRIBUTE$=VALUE]

[ATTRIBUTE$=VALUE] = An element with an attribute ATTRIBUTE whose value ends with VALUE.

Informasjon om E[A$=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt der verdien ender med B, uavhengig om verdien også forekommer lenger fremme.

a[href$=".pdf"]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><a href="http://nettside.no" target="_blank">Link, åpnes i nytt vindu</a></li>
  <li><img src="img/flower.jpg" alt="my flowers" title="flower" style="width:104px;height:142px;" /></li>
  <li><a href="https://nettside.no/photos/"><img src="flower.gif" alt="flower"></a></li>
  <li><a href="navneliste.pdf">Link til en PDF-navneliste</a></li>
  <li><a href="http://www.w3schools.com/lib/w3.css">CSS-filen til W3</a></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute$=”value”] Selector: This selector is used to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word.

Example:

[class$="gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [class$="geeks"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div class = "gfg">GeeksforGeeks</div>
<div Class = "geeksforgeeks">A computer science portal for geeks
</div>
<div class = "geeks">GeeksforGeeks is coding platform
</div>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.
• Med img[alt~=verdien] vil vi formatere hvis verdien slutter med ordet i alt-attributtet.

img[alt$=asen]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="hedda.jpg" alt="Hedda"></li>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jonasen"></li>
</ol>

[ATTRIBUTE*=VALUE]

[ATTRIBUTE*=VALUE] = An element with an attribute ATTRIBUTE whose value contains VALUE.

Informasjon om E[A*=B]:

• Gruppe: Attributt selektorer.
• Styrer: Alle elementer E med en A attributt som inneholder verdien B.

a[href*="w3schools"]{
       border: solid 3px LimeGreen;
}

<ol>
  <li><a href="http://nettside.no" target="_blank">Link, åpnes i nytt vindu</a></li>
  <li><img src="img/flower.jpg" alt="my flowers" title="flower" style="width:104px;height:142px;" /></li>
  <li><a href="https://nettside.no/photos/"><img src="flower.gif" alt="flower"></a></li>
  <li><a href="navneliste.pdf">Link til en PDF-navneliste</a></li>
  <li><a href="http://www.w3schools.com/lib/w3.css">CSS-filen til W3</a></li>
</ol>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

gfg: CSS | Attribute Selector

https://www.geeksforgeeks.org/css-attribute-selector/?ref=rp

• [attribute*=”value”] Selector: This selector selects all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word.

Example:

[class*="gfg"] { 
                color:green; 
                font-size:40px; 
                font-weight:bold; 
                text-align:center; 
            } 
            [class*="for"] { 
                font-size:17px; 
                text-align:center; 
                margin-top:0px; 
            } 

<div class = "gfg">GeeksforGeeks</div>
<div Class = "geeksforgeeks">A computer science portal for geeks
</div>
<div class = "geeks for">GeeksforGeeks is coding platform
</div>

Fra (www.qross.no/blogg/attribute-selectors-i-css/)

PB: Jeg har utvidet og lekt videre med innholdet:

• Med img vil vi formatere alle bilder.
• Med img[alt] vil vi formatere bilder som har et alt-attributt.
• Med img[alt=verdien] vil vi formatere etter verdien (innholdet) til alt-attributtet.
• Med img[alt~=verdien] vil vi formatere hvis verdien inneholder ordet i alt-attributtet.

img[alt*=ona]{
       border: solid 5px yellow;
}

<ol>
  <li><img src="hedda.jpg" alt="Hedda"></li>
  <li><img src="jonas.jpg"></li>
  <li><img src="jonas.jpg" alt="Jonas"></li>
  <li><img src="jonas_olsen.jpg" alt="Jonas Olsen"></li>
  <li><img src="jonas-magnus-jonasen.jpg" alt="Jonas-Magnus Jonasen"></li>
  <li><img src="ole_jonasen.jpg" alt="Ole Jona>sen"</li>
</ol>

:ACTIVE

ELEMENT:ACTIVE = An <element> element provided it is active.

Fra developer.mozilla.org

Matches when an item is being activated by the user, for example clicked on.

a:link { color: blue; }          /* Unvisited links */
a:visited { color: purple; }     /* Visited links */
a:hover { background: yellow; }  /* Hovered links */
a:active { color: red; }         /* Active links */

p:active { background: #eee; }   /* Active paragraphs */

Active form elements

form :active {
  color: red;
}

form button {
  background: white;
}

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

Gjør ikke annet enn at teksten blir rød når musepekeren klikker og/eller holdes nedtrykket. Ikke lagt inn.

w3schools: CSS :active Selector (Pseudo-class)

Definition and Usage

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

Example

Select and style the active link:

a:active {
  background-color: yellow;
}

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :active selector styles the active link.</p>

Gjør ikke annet enn at bakgrunnen blir gul når musepekeren klikker og/eller holdes nedtrykket. Ikke lagt inn.

::AFTER

ELEMENT::AFTER = The AFTER pseudo-element of an <element> element.

Example (www.tutorialspoint.com/grouping-selectors-in-css)

div::after,p::after{
   content: "Demo text";
   margin: 4px;
   box-shadow: inset 0 0 4px darkorange;
}

<div></div>
<p>This is example text.</p>

Fra tutorialspoint.com

:after

Use this element to insert some content after an element.

The :after pseudo-element

The following example demonstrates how to use the :after element to add some content after any element.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

Fra developer.mozilla.org

::after (:after)

The ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

/* Add an arrow after links */
a::after {
  content: "→";
}

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

Simple usage

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

Decorative example

We can style text or images in the content property almost any way we want.

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

Tooltips

This example uses ::after, in conjunction with the attr() CSS expression and a data-descr custom data attribute, to create tooltips. No JavaScript is required!

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

<p>Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
</p>

w3schools: CSS ::after Selector (Pseudo-element)

Definition and Usage

The ::after selector inserts something after the content of each selected element(s).

Use the content property to specify the content to insert.

Use the ::before selector to insert something before the content.

Example

Insert some text after the content of each <p> element:

p::after { 
  content: " - Remember this";
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

Example

Insert content after every <p> element, and style the inserted content:

p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

Example

The following example inserts an image after the content of each <h1> element:

h1::after {
  content: url(smiley.gif);
}

<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>

<h1>This is a heading</h1>

::BEFORE

ELEMENT::BEFORE = The BEFORE pseudo-element of an <element> element.

Fra tutorialspoint.com

:before

Use this element to insert some content before an element.

The :before pseudo-element

The following example demonstrates how to use the :before element to add some content before any element.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

Advanced CSS-Only HTML Form Styling

https://www.jonathan-harrell.com/blog/advanced-css-only-form-styling/

Use this selector to indicate that an input has the required attribute. Here I am using an empty .help-text span and placing some content dynamically using the ::before pseudo-element. Realistically, this would be done with JavaScript, but I am including here to demonstrate a pure CSS approach.

input:required + .help-text::before {
  content: '*Required';
}

<label for="required-input">Required input</label>
<input type="text" id="required-input" required>
<span class="help-text"></span>

Eksempel 2, med samme trikset:

input[type='email']:invalid + .help-text::before {
  content: 'You must enter a valid email.'
}

<label for="invalid-email">Invalid input</label>
<input type="email" id="invalid-email" value="notanemail">
<span class="help-text"></span>

Eksempel 3, med samme trikset:

input:out-of-range + .help-text::before {
  content: 'Out of range';
}

<label for="out-of-range-input">Out-of-range input</label>
<input
  type="number"
  id="out-of-range-input"
  min="1"
  max="10"
  value="12"
>
<span class="help-text">(value must be between 1 and 10)</span>

ishadeed: Uncommon Use Cases For Pseudo Elements

https://ishadeed.com/article/unusual-use-cases-pseudo-elements/

body {
  font-family: 'Arial';
  padding: 1rem;
  max-width: 600px;
  margin: 2rem auto;
}

p {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  text-align: center;
  
  &:before,
  &:after {
    content: "";
    height: 2px;
    background: #c5c5c5;
    flex-grow: 1;
    
  }
  
  &:before {
    margin-right: 10px;
  }
  
  &:after {
    margin-left: 10px;
  }
}

<p>Or</p>

Or

body {
  text-align: center;
  background: #fcfcfa;
  color: #818078;
  font-family: Futura, sans-serif;
}

.container {
  max-width: 50%;  
  margin: 40px auto;
}

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: .5;
  &:before {
    content: '';
    // use the linear-gradient for the fading effect
    // use a solid background color for a solid bar
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;

    padding: 0 .5em;
    line-height: 1.5em;
    // this is really the only tricky part, you need to specify the background color of the container element...
    color: #818078;
    background-color: #fcfcfa;
  }
}

<div class="container">
  <p>You can divide with any text you like.</p>
  <p>For instance this...</p>
  <hr class="hr-text" data-content="AND">
  <p>...this...</p>
  <hr class="hr-text" data-content="OR">
  <p>...even this!</p>
</div>

w3schools: CSS ::before Selector (Pseudo-element)

Definition and Usage

The ::before selector inserts something before the content of each selected element(s).

Use the content property to specify the content to insert.

Use the ::after selector to insert something after the content.

Example

Insert some text before the content of each <p> element:

p::before {
  content: "Read this -";
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

Example

Insert content before every <p> element's content, and style the inserted content:

p::before { 
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

Example

The following example inserts an image before the content of each <h1> element:

h1::before {
  content: url(smiley.gif);
}

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

:CHECKED

input:checked = An <input> element provided it is checked.

Fra tutorialspoint.com

Use the CSS :checked selector to style every checked <input> element.

Denne påvirker utseendet på en forhåndsvalgt CHECKED, samt de en klikker på. Uten dette vil denne og de andre se ut som de andre, men fortsatt være og kunne bli valgt.

input:checked {
  height: 20px;
  width: 20px;
}

<p>Fav sports:</p>
<form action="">
  <input type = "checkbox" value = "Football">Football<br>
  <input type = "checkbox" value = "Cricket">Cricket<br>
  <input type = "checkbox" checked = "checked" value = "Tennis"> Tennis<br>
  <input type = "checkbox" value = "Badminton">Tennis
</form>

Dersom klikket på Subject, gir grønn bakgrunn:

Fra developer.mozilla.org

:checked

Matches when elements such as checkboxes and radiobuttons are toggled on.

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.

/* Matches any checked/selected radio, checkbox, or option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

Note: Because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser.

Syntax

:checked

Basic Example

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

Toggling elements with a hidden checkbox

This example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using JavaScript.

/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

w3schools: CSS :checked Selector (Pseudo-class)

Definition and Usage

The :checked selector matches every checked <input> element (only for radio buttons and checkboxes) and <option> element.

Example

Set the height and width for all checked <input> elements:

input:checked {
  height: 50px;
  width: 50px;
}

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Male<br>
  <input type="radio" value="female" name="gender"> Female<br>
  <input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
  <input type="checkbox" value="Car"> I have a car 
</form>

:DEFAULT

input:checked = An <input> element provided it is.

Fra developer.mozilla.org

:default

Matches one or more UI elements that are the default among a set of elements.

The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

What this selector matches is defined in HTML Standard §4.16.3 Pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements:

• A default option element is the first one with the selected attribute, or the first enabled option in DOM order. multiple <select>s can have more than one selected option, so all will match :default.
• <input type="checkbox"> and <input type="radio"> match if they have the checked attribute.
• <button> matches if it is a <form>’s default submission button: the first <button> in DOM order that belongs to the form. This also applies to <input> types that submit forms, like image or submit.

Syntax

:default

Example

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring">
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked>
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall">
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter">
  <label for="winter">Winter</label>
</fieldset>

Har testet den på Edge, og der får jeg ikke en rund skyggefarge rundt, kun en firkant. Men Radio Button blir i alle fall farget.

w3schools: CSS :default Selector (Pseudo-class)

Definition and Usage

The :default selector selects the default form element in a group of related elements.

The :default selector can only be used on <button>, <input type="checkbox">, <input type="radio">, and <option> elements

Example

Add a red shadow color to the default input element:

input:default {
  box-shadow: 0 0 1px 1px red;
}

<h1>The default Selector</h1>
<p>The :default selector selects the default form element in a group of related elements.</p>
<p>The "male" radio button is checked by default:</p>

<form action="">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

<p>The :default selector is not supported in Internet Explorer 11 and earlier versions.</p>

:DISABLED

input:disabled = An <input> element provided it is disabled.

Fra tutorialspoint.com

Use the CSS :disabled selector to style every disabled <input> element.

Denne påvirker utseendet på forhåndsvalgte felt. Den fjerner også dennes egenskaper, her med mulighet til å klikke på pilene i FORM satt opp med number.

input:enabled {
  background: blue;
}

input:disabled {
  background: red;
}

<form action = "">
  Subject <input type = "text" name = "subject"><br>
  Student: <input type = "text" name = "student"><br>
  Age: <input type = "number" name = "age" disabled><br>
</form>

Fra developer.mozilla.org

:disabled

Represents a user interface element that is in a disabled state.

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

Syntax

:disabled

Example

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields.

CSS

input[type="text"]:disabled {
  background: #ccc;
}

HTML

<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

JavaScript

// Wait for the page to finish loading
document.addEventListener('DOMContentLoaded', function () {
  // Attach `change` event listener to checkbox
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // Select the billing text fields
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

w3schools: CSS :disabled Selector (Pseudo-class)

Definition and Usage

The :disabled selector matches every disabled element (mostly used on form elements).

Example

Set a background color for all disabled input elements of type="text":

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

Example

Set a background color for all disabled <input> elements:

input:enabled {
  background: #ffff00;
}

input:disabled {
  background: #dddddd;
}

  First name: 

  Last name: 

  Country: 

  Password: 

  E-mail: 

:EMPTY

ELEMENT:EMPTY = An <element> element provided it is empty.

Fra tutorialspoint.com

Use the CSS :empty selector to style every element that has no children with CSS.

p.demo {
  width: 300px;
  height: 20px;
  background: gray;
}

p:empty {
  width: 150px;
  height: 20px;
  background: orange;
}

<p class="demo">This is demo text. Below is empty text.</p>
<p></p>

Fra developer.mozilla.org

:empty

Represents an element with no children other than white-space characters.

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

/* Selects any 
 that contains no content */
div:empty {
  background: lime;
}

Note: In Selectors Level 4 the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet.

Syntax

:empty

Example

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
	<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
	<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
</div>

w3schools: CSS :empty Selector (Pseudo-class)

Definition and Usage

The :empty selector matches every element that has no children (including text nodes).

Example

Specify a background color for empty <p> elements:

p:empty {
  width: 100px;
  height: 20px;
  background: #ff0000;
}

<p></p>
<p>A paragraph.</p>
<p>Another paragraph.</p>

:ENABLED

input:enabled = An <input> element provided it is enabled.

Fra tutorialspoint.com

Use the CSS :enabled selector to style every enabled <input> element.

input:enabled {
  background: blue;
}

<form action = "">
  Subject <input type = "text" name = "subject"><br>
  Student: <input type = "text" name = "student"><br>
  Age: <input type = "number" name = "age" disabled><br>
</form>

Fra developer.mozilla.org

:enabled

Represents a user interface element that is in an enabled state.

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.

/* Selects any enabled <input> */
input:enabled {
  color: blue;
}

Syntax

:enabled

Example

The following example makes the color of text and button <input>s green when enabled, and gray when disabled. This helps the user understand which elements can be interacted with.

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem"><br>

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>

  <input type="button" value="Submit">
</form>

w3schools: CSS :enabled Selector (Pseudo-class)

Definition and Usage

The :enabled selector matches every enabled element (mostly used on form elements).

Example

Set a background color for all enabled <input> elements of type="text":

input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

:FIRST-CHILD

ELEMENT:FIRST-CHILD = An <element> element provided it is the first child of its parent.

Fra css-tricks.com

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article and want to make the first paragraph larger – like a “lede”, or piece of introductory text:

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

Instead of giving it a class (e.g. .first), we can use :first-child to select it:

p:first-child {
  font-size: 1.5em;
}

Using :first-child is very similar to :first-of-type but with one critical difference: it is less specific. :first-child will only try to match the immediate first child of a parent element, while first-of-type will match the first occurrence of a specified element, even if it doesn’t come absolutely first in the HTML. In the example above the outcome would be the same, only because the first child of the article also happens to be the first p element. This reveals the power of :first-child: it can identify an element with relation to all its siblings, not just siblings of the same type.

The more complete example below demonstrates the use of :first-child and a related pseudo-class selector, :last-child.

body {
  font-family: Palatino, Georgia, serif;
  max-width: 32em;
  padding: 1em 0 0 1em;
  line-height: 1.4;
}

/* by formatting the selector this way, we are less specific than `article p:first-child`
 this means ANY element that is the first child of `article` can be styled */
article :first-child {
color: red;
}

p:last-child {
  font-size: 0.75em;
  font-style: italic;
}

Fra tutorialspoint.com

The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.

To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.

For example, to indent the first paragraph of all <div> elements, you could use this definition −

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

Annen funnet, og bearbeidet samt veldig fin!!

.listegrvert ul {
 width: 150px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

.listegrvert li {
 padding: 10px;
 border-bottom: 2px solid black;
 border-top: 2px solid #3c3c3c;
}

.listegrvert li:first-child {
    border-top: none;
}
 
.listegrvert li:last-child {
   border-bottom: none;
}

<div class="listegrvert">
<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>
</div>

Fra developer.mozilla.org

:first-child

Matches an element that is the first of its siblings.

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

/* Selects any 
 that is the first element
   among its siblings */
p:first-child {
  color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:first-child

Basic Example

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

Styling a list

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

w3schools: CSS :first-child Selector (Pseudo-class)

Definition and Usage

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Set a background color for all enabled <input> elements of type="text":

Example

Select and style every <p> element that is the first child of its parent:

p:first-child {
  background-color: yellow;
}

<p>This paragraph is the first child of its parent (body).</p>

<h1>Welcome to My Homepage</h1>
<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>

Example

Select and style every <i> element of every <p> element, where the <p> element is the first child of its parent:

p:first-child i {
  background: yellow;
}

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

Example

Select and style the first <li> element in lists:

PB: Gjør her i praksis det samme som den nedenfor. Testet på w3.

li:first-child {
  background: yellow;
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Example

Select and style the first child element of every <ul> element:

PB: Gjør her i praksis det samme som den over. Testet på w3.

ul > :first-child {
  background:yellow;
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

::FIRST-LETTER

ELEMENT::FIRST-LETTER = The first letter of an <element> element.

Fra css-tricks.com

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span> tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a <code></code> tag. You can style that first letter as you would a real element with:

p::first-letter {
  font-weight: bold;
  color: red;
}

<p>The first letter is bold and red</p>

The result is as if you had a faux element around the first letter:

<!-- Just an example, does not work! -->
<p>
  <firstletter>T</firstletter>he first letter is bold and red.
</p>

• The pseudo element only works if the parent element is a block container box (in other words, it doesn’t work on the first letter of display: inline; elements.)
• If you have both a ::first-letter and ::first-line on an element, the first letter will inherit from the first line styles, but styles on the ::first-letter will overwrite when styles conflict.
• If you generate content with ::before, the first letter or punctuation character, whether it’s part of the original text node or created with generated content, will be the target.

When using for drop-caps, use in conjunction with p:first-of-type so not every first letter gets styled

https://www.w3.org/wiki/CSS/Selectors/pseudo-elements/:before

p.special::before{
  content: "Special! "
}
p.special::first-letter{
  background-color:maroon;
 color: #ffd800
}

<p class="special">Christmas Party.</p>

Fra tutorialspoint.com

:first-letter

Use this element to add special style to the first letter of the text in a selector.

The :first-letter pseudo-element

The following example demonstrates how to use the :first-letter element to add special effects to the first letter of elements in the document.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

Fra developer.mozilla.org

::first-letter (:first-letter)

The ::first-letter (:first-letter) CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables)..

/* Selects the first letter of a 
 */
p::first-letter {
  font-size: 130%;
}

Allowable properties

Only a small subset of CSS properties can be used with the ::first-letter pseudo-element:

• All font-related properties.
• All background-related properties.
• All margin properties.
• All padding properties.
• All border properties.
• The color property.
• The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) CSS properties.

p {
  width: 500px;
  line-height: 1.5em;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>

<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>

w3schools: CSS ::first-letter Selector (Pseudo-element)

Definition and Usage

The ::first-letter selector is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter: 

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if float is 'none')
• text-transform
• line-height
• float
• clear

Note: The ::first-letter selector can only be used with block-level elements.

Example

Select and style the first letter of every <p> element:

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}  

<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>

::FIRST-LINE

ELEMENT::FIRST-LINE = The first line of an <element> element.

Fra css-tricks.com

The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a stylistic choice. The amount of text targeted by this pseudo-element depends on the several factors like line length, viewport width, font-size, letter-spacing, word-spacing. As soon as the line breaks, the text after that is no longer selected. Note that there is no actual DOM element being selected here (thus “pseudo” element).

This pseudo-element only works on block-level elements (when display is set to either block, inline-block, table-caption, table-cell). If set on an inline element, nothing happens, even if that inline element has a line break within it.

Also note that not all properties can be used in a ruleset containing ::first-line. Mostly:

.element::first-line {
    font-style: ...
    font-variant: ...
    font-weight: ...
    font-size: ...
    font-family: ...

    line-height: ...
    color: ...
    word-spacing: ...
    letter-spacing: ...
    text-decoration: ...
    text-transform: ...

    background-color: ...
    background-image: ...
    background-position: ...
    background-repeat: ...
    background-size: ...
    background-attachment: ...
}

The official CSS specification tells User Agents can allow other properties if they feel like it:

UAs may apply other properties as well.

A word regarding specificity

The following demo shows how ::first-line is able to override any kind of specificity, even !important.

• The 1st parapgraph is set to grey through a tag selector
• The 2nd parapgraph is set to grey through a class selector
• The 3rd parapgraph is set to grey through an ID selector
• The 4th parapgraph is set to grey through a !important bash

article {
  padding: 20px;
}

p {
  color: #444;
}

p:first-line {
  color: deepskyblue;
}

.p2 {
  color: #444;
}

.p2:first-line {
  color: tomato;
}

#p3 {
  color: #444;
}

#p3:first-line {
  color: firebrick;
}

#p4 {
  color: #444 !important;
}

#p4:first-line {
  color: hotpink;
}

This is because the pseudo-element is treated like a child element, not just a part of the parent element. So the rules you apply to it are just for it, the parent rules just may cascade to it.

Also, try resizing your browser to see how behave the pseudo-element when the viewport width change.

Fra tutorialspoint.com

:first-line

Use this element to add special styles to the first line of the text in a selector.

CSS pseudo-elements are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. A simple syntax of pseudo-element is as follows −

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements −

selector.class:pseudo-element {property: value}

The :first-line pseudo-element

The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Fra developer.mozilla.org

::first-line (:first-line)

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.

/* Selects the first line of a <p> */
p::first-line {
  color: red;
}

Allowable properties

Only a small subset of CSS properties can be used with the ::first-line pseudo-element:

• All font-related properties.
• All background-related properties.
• The color property.

::first-line {
  color: blue;
  text-transform: uppercase;

  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}

<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>

<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>

w3schools: CSS ::first-line Selector (Pseudo-element)

Definition and Usage

The ::first-line selector is used to add a style to the first line of the specified selector.

Note: The following properties can be used with ::first-line:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Note: The ::first-line selector can only be used with block-level elements.

Example

Select and style the first line of every <p> element:

PB: Dette gjelder første linje i hver P, og er variabel med hensyn til skjermstørrelsen og hva som til en hver tid er første/øverste linje.

p::first-line {
  background-color: yellow;
}

WWF's Mission Statement
To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; 
conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, 
and promoting the reduction of pollution and wasteful consumption.

PB: Denne kan også kombineres (Multiple Pseudo-elements).

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

:FIRST-OF-TYPE

ELEMENT:FIRST-OF-TYPE = An <element> element provided it is the first of its type in its parent.

Fra css-tricks.com

The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title and several paragraphs:

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>

We want to make the first paragraph larger, as a sort of “lede” or introductory paragraph. Instead of giving it a class, we can use :first-of-type to select it:

p:first-of-type {
  font-size: 1.25em;
}

Using :first-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-child(1), nothing would happen because the paragraph is not the first child of its parent (the <article>). This reveals the power of :first-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :first-of-type and a related pseudo-class selector, :last-of-type.

body {
  font-family: Palatino, Georgia, serif;
  max-width: 32em;
  padding: 1em 0 0 1em;
  line-height: 1.4;
}

p:first-of-type {
  font-size: 1.25em;
}

p:last-of-type {
  font-size: 0.75em;
  font-style: italic;
}

Around the World in Eighty Days

"Very well, Sir Francis," replied Mr. Fogg; "if he had been caught he would have been condemned and punished, and then would have quietly returned to Europe. I don't see how this affair could have delayed his master."

The conversation fell again. During the night the train left the mountains behind, and passed Nassik, and the next day proceeded over the flat, well-cultivated country of the Khandeish, with its straggling villages, above which rose the minarets of the pagodas.

Jules Verne was a French author who pioneered the genre of science fiction in the late nineteenth and early twentieth century. Follow him on Twitter.

Fra developer.mozilla.org

:first-of-type

Matches an element that is the first of its siblings, and also matches a certain type selector.

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

/* Selects any 
 that is the first element
   of its type among its siblings */
p:first-of-type {
  color: red;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:first-of-type

Example

Styling the first paragraph.

p:first-of-type {
  color: red;
  font-style: italic;
}

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (*) is implied when no simple selector is written.

article :first-of-type {
  background-color: pink;
}

<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>

w3schools: CSS :first-of-type Selector (Pseudo-class)

Definition and Usage

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

Tip: This is the same as :nth-of-type(1).

Example

Specify a background color for the first <p> element of its parent:

p:first-of-type {
  background: red;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

code.tutsplus.com

FRA Live Demo of Nth Child and Type Selectors

div#xfot-container ul:first-of-type > li:nth-child(2) {
  font-weight: bold;
}

<h2>X:first-of-type</h2>
<div id="xfot-container">
  <div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
  </div>
</div>

:FOCUS

input:focus = An <input> element provided it is focused.

Fra css-tricks.com

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:

textarea:focus {
  background: pink;
}

And here’s what that code looks like in action:

Click inside me (or tab to me)

Any element (most commonly <input>s and <textarea>s) are in “focus” when they are selected and ready to enter text (like when a cursor is blinking.

“Tabbing”

Another use of the :focus pseudo class is “tabbing” through elements. Many browsers have a default focus state for tab selection, which is a dotted outline. It is quite easy to remove, but make sure to replace it with a suitable alternative if you do.

<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes work for this, as in this example:

@import "compass/css3";

:focus {
  background: pink;
}

div {
  margin: 16px 0;
}

textarea {
  width: 500px;
}

button {
  margin: 16px 0;
  display: block;
}

View Compiled

HTML5 Methods for Making Things Tab-able

All of the items below are tabbable. The text area and button are tabbable by default, and the divs use two different methods.

Fra tutorialspoint.com

Use the :focus selector to select the element that has focus.

Denne vil få grønn bakgrunnsfarge når den klikkes for å skrive noe inn. (Ellers: FORM satt opp med number, får automatisk pil opp/ned for å kunne velge tallverdier.)

input:focus {
  background-color: green;
}

<form action = "">
  Subject <input type="text" name="subject"><br>
  Student: <input type="text" name="student"><br>
  Age: <input type="number" name="age"><br>
  <input type="submit" value="Submit">
</form>

Dersom klikket på Subject, gir grønn bakgrunn:

Fra developer.mozilla.org

Matches when an element has focus.

Note: This pseudo-class applies only to the focused element itself. Use :focus-within if you want to select an element that contains a focused element.

Syntax

:focus

:focus { outline: none; }

Quick Tip: Never remove CSS outlines.

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

FOCUS Example

.focusmozz-red-input:focus {
  background: yellow;
  color: red;
}

.focusmozz-blue-input:focus {
  background: yellow;
  color: blue;
}

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

w3schools: CSS :focus Selector (Pseudo-class)

Definition and Usage

The :focus selector is used to select the element that has focus.

Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Example

Select and style an input field when it gets focus:

input:focus {
  background-color: yellow;
}

<p>Click inside the text fields to see a yellow background:</p>

<form>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

Example

When an <input type="text"> gets focus, gradually change the width from 100px to 250px:

input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}

<h1>The width Property</h1>

<p>Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:</p>

Search: <input type="text" name="search">

:FULLSCREEN

ELEMENT:FULLSCREEN = An <element> element provided it is.

w3schools: CSS :fullscreen Selector (Pseudo-class)

Definition and Usage

The :fullscreen selector is used to select the element(s) that is in full-screen mode.

Example

Set the background color to yellow when the page is in full-screen mode:

/* Safari syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 syntax */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}

<h2>Fullscreen Mode</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
// Using JavaScript to open the page in fullscreen mode
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier versions do not support fullscreen mode.</p>

:HOVER

ELEMENT:HOVER = An <element> element provided it is hovered.

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

w3schools: CSS :hover Selector (Pseudo-class)

Definition and Usage

The :hover selector can be used on all elements, not only on links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

Example

Select and style a link when you mouse over it:

a:hover {
  background-color: yellow;
}

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="https://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Gjør ikke annet enn at bakgrunnen blir gul når musepekeren holdes over den. Ikke lagt inn.

Example

Hover over a <span> element to show a <div> element (like a tooltip):

div {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
span:hover + div {
  display: block;
}

<span>Hover over me!</span>
<div>I will show on hover</div>

:IN-RANGE

input:in-range = An <input> element provided it is in-range.

Fra css-tricks.com

Fra developer.mozilla.org

:in-range

Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.

The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.

/* Selects any <input>, but only when it has a range
   specified, and its value is inside that range */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

This pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.

Note: This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Syntax

:in-range

Note: This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Note: An empty <input> does not count as out of range, and will not be selected using the :out-of-range pseudo-class selector. The :blank pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the required attribute and the :invalid pseudo-class to provide more general logic and styling for making inputs mandatory (:invalid will style blank and out-of-range inputs).

Example

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}

<form action="" id="form1">
  <ul>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12" required>
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

w3schools: CSS :in-range Selector (Pseudo-class)

Definition and Usage

The :in-range selector selects all elements with a value that is within a specified range.

Note: The :in-range selector only works for input elements with min and/or max attributes!

Tip: Use the :out-of-range selector to select all elements with a value that is outside a specified range.

Example

Select and style only if the value of the <input> element is "in range":

input:in-range {
  border: 2px solid yellow;
}

<h3>A demonstration of the :in-range selector.</h3>

<input type="number" min="5" max="10" value="7">

<p>Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>

:INDETERMINATE

input:indeterminate = An <input> element provided it is indeterminate.

gfg: CSS | :indeterminate Selector

https://www.geeksforgeeks.org/css-indeterminate-selector/

The :indeterminate selector in CSS is used to select any form elements that are in indeterminate state i.e a state that is neither checked nor unchecked.

Elements targeted by this selector are:

• <input = “checkbox”> elements whose indeterminate property is set to true by JavaScript
• <input = “radio”> elements, when all radio buttons with the same name value in the form are unchecked
• <progress> elements in an indeterminate state

Example:

input:indeterminate + label { 
            background: green; 
            color: white; 
            padding: 4px; 
        } 
          
        input:indeterminate { 
            box-shadow: 0 0 1px 1px green; 
        } 

<h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
    <h2> 
            CSS :indeterminate selector 
        </h2> 
    <div> 
        <input type="checkbox" id="checkbox"> 
        <label for="checkbox">This is an indeterminate checkbox.</label> 
    </div> 
    <br> 
    <div> 
        <input type="radio" id="radio" name="abc"> 
        <label for="radio">This is an indeterminate radio button.</label> 
    </div> 
  
    <script> 
        var doc = document.getElementsByTagName("input"); 
  
        for (var i = 0; i < doc.length; i++) { 
            doc[i].indeterminate = true; 
        } 
    </script>

w3schools: CSS :indeterminate Selector (Pseudo-class)

Definition and Usage

The :indeterminate selector selects form elements that are in an indeterminate state.

The :indeterminate selector can only be used on <input type="checkbox">, <input type="radio">, and <progress> elements.

Note: Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript.

Radio buttons are indeterminate when all radio buttons with the same name value in the form are unchecked.

Example

Add a red shadow color to indeterminate inputs:

input:indeterminate {
  box-shadow: 0 0 1px 1px red;
}

<h1>The indeterminate Selector</h1>
<p>The checkbox below is in an indeterminate state (by JavaScript). 
If you click on it, it will change its state to "checked", 
and lose its red shadow color, as it is no longer indeterminate.</p>
<p>Note that an indeterminate checkbox has a "-" icon, 
rather than a checkmark or an empty box.</p>

<input type="checkbox" id="myCheckbox"> Checkbox

<script>
// Make the checkbox indeterminate via JavaScript
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>

:INVALID

input:invalid = An <input> element provided it is invalid.

Fra tutorialspoint.com

Use the CSS :invalid selector to style all <input> elements with an invalid value.

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:invalid {
            background: red;
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
         <input type = "email" value = "InvalidEmail">
         <p>The style (red color background) appears if you type an irrelevant/ invalid email address.</p>
   </body>
</html>

Fra developer.mozilla.org

:invalid

Matches an element with invalid contents. For example an input element with type 'email' with a name entered.

The :invalid pseudo-class represents any <input> or other <form> element whose contents fail to validate.

/* Selects any invalid <input> */
input:invalid {
  background-color: pink;
}

This pseudo-class is useful for highlighting field errors for the user.

Syntax

:invalid

Notes (Radio buttons)

If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)

Notes (Gecko defaults)

By default, Gecko does not apply a style to the :invalid pseudo-class. However, it does apply a style (a red "glow" using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.

Example

A form that colors elements green when they validate and red when they don't.

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input">
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required>
  </div>
</form>

w3schools: CSS :invalid Selector (Pseudo-class)

Definition and Usage

The :invalid selector selects form elements with a value that does not validate according to the element's settings.

Note: The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.

Tip: Use the :valid selector to select form elements with a value that validates according to the element's settings.

Example

Select and style only if the value of the <input> element is invalid:

input:invalid {
  border: 2px solid red;
}

<h3>A demonstration of the :invalid selector.</h3>

<input type="email" value="supportEmail">

<p>Try typing a legal e-mail address, to see the styling disappear.</p>

<p><strong>Note</strong>: The :invalid selector is not supported in Internet Explorer 9 and earlier versions.</p>

:LANG(LANGUAGE)

ELEMENT:LANG(it) = An <element> element provided it is.

Fra css-tricks.com

The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute. Language in HTML, is determined by a combination of the lang="" attribute, the <meta> element, and by information from the protocol such as the HTTP Accept-Language request-header¹ field. Acceptable language-code strings are specified in the HTML 4.0 specification.

:lang(language-code) { 
  // whatever styling
}

:lang(X) matches if the element is in language X. Whether the match is based solely on the identifier X being either equal to, or a hyphen-separated substring of, the element’s language value, in the same way as if performed by the “|=“ operator. The matching of X against the element’s language value is performed case-insensitively for characters within the ASCII range. The identifier X does not have to be a valid language name. It’s important to note that the :lang selector can be used globaly or specifically on any given element. Feel free to use descendant selectors or the :lang(language-code) pseudo class alone.

Example

Using the lang attribute on our root element (i.e. <html>) we can replace quotes depending upon the language specified.

<html lang="en">
<body>
  <p><q>Pellentesque habitant ...............</q></p>
</body>
</html>

q:before { content: open-quote; }
q:after { content: close-quote; }

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }

English (en)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

French (fr)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

German (de)

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

The language attribute cannot be applied to the following elements:

• applet
• base
• basefont
• br
• frame
• frameset
• iframe
• param
• script

Fra tutorialspoint.com

The :lang pseudo-class

The language pseudo-class :lang, allows constructing selectors based on the language setting for specific tags.

This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').

In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used −

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

The :lang selectors will apply to all the elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.

It will produce the following result −

Fra developer.mozilla.org

:lang()

Select an element based on its content language.

The :lang() CSS pseudo-class matches elements based on the language they are determined to be in.

/* Selects any 
 in English (en) */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

Formal syntax

:lang(  )

Parameter

<language-code>

A <string> representing the language you want to target. Acceptable values are specified in the HTML spec.

Example

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

Disse blir egentlig ikke kopierbare, men her har jeg laget en fake, Unicode number = ASCII.

w3schools: CSS :lang Selector (Pseudo-class)

Definition and Usage

The :lang Selector selector is used to select elements with a lang attribute with the specified value.

Note: The :lang attribute value is most often a two-letter language code, like lang="fr" (for French), or two language codes combined, like lang="fr-ca" (for Canadian French).

Example

Select and style every <p> element with a lang attribute value equal to "it" (Italian):

p:lang(it) { 
  background: yellow;
}

<p>I live in Italy.</p>
<p lang="it">Ciao bella!</p>

Example

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
div[data-lang="zh-TW"] {
  color: purple;
}

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>

:LAST-CHILD

ELEMENT:LAST-CHILD = An <element> element provided it is the last child of its parent.

Fra css-tricks.com

The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article and want to make the last paragraph smaller, to act as a conclusion to the content (like an editor’s note):

<article>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
  <p>Last paragraph...</p>
</article>

Instead of using a class (e.g. .last), we can use :last-child to select it:

p:last-child {
  font-size: 0.75em;
}

Using :last-child is very similar to :last-of-type but with one critical difference: it is less specific. :last-child will only try to match the very last child of a parent element, while last-of-type will match the last occurrence of a specified element, even if it doesn’t come dead last in the HTML. In the example above the outcome would be the same, only because the last child of the article also happens to be the last p element. This reveals the power of :last-child: it can identify an element with relation to all of its siblings, not just siblings of the same type.

The more complete example below demonstrates the use of :last-child and a related pseudo-class selector, :first-child.

body {
  font-family: Palatino, Georgia, serif;
  max-width: 32em;
  padding: 1em 0 0 1em;
  line-height: 1.4;
}

/* by formatting the selector this way, we are less specific than `article p:first-child`
 this means ANY element that is the first child of `article` can be styled */
article :first-child {
color: red;
}

p:last-child {
  font-size: 0.75em;
  font-style: italic;
}

Fra developer.mozilla.org

:last-child

Matches an element that is the last of its siblings.

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

/* Selects any <p> that is the last element
   among its siblings */
p:last-child {
  color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:last-child

Basic Example

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>

Styling a list

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

w3schools: CSS :last-child Selector (Pseudo-class)

Definition and Usage

The :last-child selector matches every element that is the last child of its parent.

Note: p:last-child is equal to p:nth-last-child(1).

Example

Specify a background color for the <p> element that is the last child of its parent:

p:last-child {
  background: #ff0000;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

Fra stackoverflow.com (forum)

You can apply your style to all the div and re-initialize the last one with :last-child:

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• easy to read/remember
• fast to execute
• browser compatible (IE9+ since it's still CSS3)

:LAST-OF-TYPE

ELEMENT:LAST-OF-TYPE = An <element> element provided it is the last of its type in its parent.

Fra css-tricks.com

The :last-of-type selector allows you to target the last occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

Suppose we have an article with a title, several paragraphs and an image:

<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <img src="...">
</article>

We want to make the last paragraph smaller, to act as a conclusion to the content (like an editor’s note). Instead of giving it a class, we can use :last-of-type to select it:

p:last-of-type {
  font-size: 0.75em;
}

Using :last-of-type is very similar to :nth-child but with one critical difference: it is less specific. In the example above, if we had used p:nth-last-child(1), nothing would happen because the paragraph is not the last child of its parent (the <article>). This reveals the power of :last-of-type: it targets a particular type of element in a particular arrangement with relation to similar siblings, not all siblings.

The more complete example below demonstrates the use of :last-of-type and a related pseudo-class selector, :first-of-type.

body {
  font-family: Palatino, Georgia, serif;
  max-width: 32em;
  padding: 1em 0 0 1em;
  line-height: 1.4;
}

p:first-of-type {
  font-size: 1.25em;
}

p:last-of-type {
  font-size: 0.75em;
  font-style: italic;
}

Around the World in Eighty Days

"Very well, Sir Francis," replied Mr. Fogg; "if he had been caught he would have been condemned and punished, and then would have quietly returned to Europe. I don't see how this affair could have delayed his master."

The conversation fell again. During the night the train left the mountains behind, and passed Nassik, and the next day proceeded over the flat, well-cultivated country of the Khandeish, with its straggling villages, above which rose the minarets of the pagodas.

Jules Verne was a French author who pioneered the genre of science fiction in the late nineteenth and early twentieth century. Follow him on Twitter.

Fra developer.mozilla.org

:last-of-type

Matches an element that is the last of its siblings, and also matches a certain type selector.

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

/* Selects any 
 that is the last element
   of its type among its siblings */
p:last-of-type {
  color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:last-of-type

Example

Styling the last paragraph.

p:last-of-type {
  color: red;
  font-style: italic;
}

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (*) is implied when no simple selector is written.

article :last-of-type {
  background-color: pink;
}

<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`!</div>
</article>

w3schools: CSS :last-of-type Selector (Pseudo-class)

Definition and Usage

The :last-of-type selector matches every element that is the last child, of a particular type, of its parent.

Note: This is the same as :nth-last-of-type(1).

Example

Specify a background color for the last <p> element of its parent:

p:last-of-type {
  background: #ff0000;
}

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

:LINK

ELEMENT:LINK = An <element> element provided it is.

Matches links that have not yet been visited.

Fra tutorialspoint.com

Use the CSS :link selector to style all unvisited links.

a:link {
  background-color: orange;
}

w3schools: CSS :link Selector (Pseudo-class)

Definition and Usage

The :link selector is used to select unvisited links.

Note: The :link selector does not style links you have already visited.

Tip: Use the :visited selector to style links to visited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.

Example

Select and style unvisited links:

a:link {
  background-color: yellow;
}

<a href="https://www.w3schools.com">W3Sschools</a>
<a href="http://www.wikipedia.org">Wikipedia</a>

<p><b>Note:</b> The :link selector style links to pages you have not visited yet.</p>

:NOT(SELECTOR)

:NOT(ELEMENT) = An element provided it is.

Fra css-tricks.com

The :not(X) property in CSS is a negation pseudo class and accepts a simple selector¹ as an argument. Essentially, just another selector of any kind.

:not matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.

/**
*
* Global Styles
*
*/

a {
  color: #4186db;
}

html {
  background: #303031;
  color: #e78629;
}

h1,h2,h3,h4,h5,h6 {
  //color: #FFF;
}

.entry {
  width: 42em;
  margin: 0 auto;
}


/**
*
* Demo A
* Class Selector on Nested Element
*/
.entry.A .entry-content :not(.intro) {
  color: #31cdf7;
}


/**
*
* Demo B
* Class Selector w/out Nesting
*
*/
.entry.B :not(.intro) {
  font-size: 14px;
}


/**
*
* Demo C
* This demo uses the attribute as our simple selector
* http://www.w3.org/TR/selectors/#simple-selectors-dfn
*
*/
.entry.C button:not([disabled]) {
  font-size: 20px;
}


/**
*
* Demo D
* Attribute Selector
*
*/
.entry.D a:not([href*="http://css-tricks"]) {
  color: #FFF;
  text-decoration: none;
}


/**
*
* Demo E
* won't work because ::first-line is a pseudo element
*
*/
.entry.E p:not(::first-line) {
  color: white;
}


/**
*
* Demo F
* nth-child Pseudo Class
*
*/
.entry.F p:not(:nth-child(2n+1)) {
  border: 1px solid orange;
  color: white;
}

xxxx

xxxx

xxxx

xxxx

xxxx

xxxx

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

In this example we have an unordered list with a single class on the li:

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

Our CSS would select all the <li> elements except the one(s) with a class of .different.

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

You could also do the same using pseudo classes which are considered a simple selector.

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

However if we use a pseudo element selector as our argument it will not produce the expected result.

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.

Negations may not be nested so :not(:not(...)) is never permitted. Authors should also note that since pseudo elements are not considered a simple selector, they are not valid as an argument to :not(X). Be mindful when using attribute selectors as some are not widely supported as others. Chaining :not selectors with other :not selectors is permissible.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Fra stackoverflow.com forum

Selects all children of an element except the last child.

ul li
{
    background-color:red;
} 

ul li:last-child
{
    background-color:green;
}

ul li:not(:last-child)
{
    border:3px blue solid;
}

<ul>
    <li>Red</li>
    <li>Red</li> 
    <li>Red</li>  
    <li>Green</li>
</ul>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Fra tutorialspoint.com

Use the CSS :not(selector) selector to style every element that is not the specified element.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
         }
         :not(p) {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
   </body>
</html>

Fra https://blog.logrocket.com/advanced-css-selectors-for-common-scenarios/

ul {
    list-style: none;
}

li {
    width: 75vw;
    padding: 2.5rem 1rem;
    box-sizing: border-box;
    background: #27d897;
    color: #003b58;
    font-family: -apple-system, Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    display: block;
}

// This selector reads, "select the <li>s
// that are not last" which gives margin
// under all the <li> except the last one.
li:not(:last-child) {
  margin-bottom: 2rem; 
}

• Item One
• Item Two
• Item Three

gfg: How to use a not:first-child selector in CSS?

https://www.geeksforgeeks.org/how-to-use-a-notfirst-child-selector-in-css/?ref=rp

This selector is used to select every element which is not the first-child of its parent element. It is represented as an argument in the form of :not(first-child) element.

Syntax:

:not( element ) {
  // CSS property
} 

Example:

h1 { 
            color:green; 
            } 
            div ul:not(:first-child) { 
                background-color: green; 
                color:white; 
                font-style:italic; 
                font-weight:bold; 
                width:60%; 
                margin-left:100px; 
            } 
            h1, h2 { 
                text-align:center; 
            } 

<h1>GeeksforGeeks</h1> 
<h2>not:first-child selector </h2> 
<div> 
<ul style="margin-left:100px"> 
  <li>gfg</li> 
  <li>geeks</li> 
  <li>sudo</li> 
</ul> 
<ul> 
  <li>Bca</li> 
  <li>Mca</li> 
  <li>B.Tech</li> 
</ul> 
</div> 

The above example shows that a <div> is a container Tag. It contains <ul> Tag so it selects all child elements of <div> tag except its first-child.

w3schools: CSS :not Selector (Pseudo-class)

Definition and Usage

The :not selector matches every element that is NOT the specified element/selector.

Example

Set a background color for all elements that are not a <p> element:

p {
  color: #000000;
}

:not(p) {
  color: #ff0000;
}

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="https://www.w3schools.com" target="_blank">Link to W3Schools!</a>

:NTH-CHILD(N)

ELEMENT:NTH-CHILD = An <element> element provided it is the nth child (formula) of its parent.

Fra css-tricks.com

SE OGSÅ: https://css-tricks.com/examples/nth-child-tester/

The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.

/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }

It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.

Suppose we are building a CSS grid, and want to remove the margin on every fourth grid module. Here’s that HTML:

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

Rather than adding a class to every fourth item (e.g. .last), we can use :nth-child:

.module:nth-child(4n) {
  margin-right: 0;
}

The :nth-child selector takes an argument: this can be a single integer, the keywords even, odd, or a formula. If an integer is specified only one element is selected—but the keywords or a formula will iterate through all the children of the parent element and select matching elements — similar to navigating items in a JavaScript array. Keywords “even” and “odd” are straightforward (2, 4, 6, etc. or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:

• “a” is an integer value
• “n” is the literal letter “n”
• “+” is an operator and may be either “+” or “-”
• “b” is an integer and is required if an operator is included in the formula

It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every fourth element with the formula 4n, which worked because every time an element was checked, “n” increased by one (4×0, 4×1, 4×2, 4×3, etc). If an element’s order matches the result of the equation, it gets selected (4, 8, 12, etc). For a more in-depth explanation of the math involved, please read this article.

To illustrate further, here are some examples of valid :nth-child selectors:

body {
  padding: 1em 2em;
}

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one li:nth-child(1) {
  background: lightsteelblue;
}

.two :nth-child(2) :nth-child(3) {
  background: lightsteelblue;
}

.three :nth-child(odd) li:nth-child(-n+3) {
  background: lightsteelblue;
}



div:before {
  font-family: monospace;
  white-space: nowrap;
  font-size: 12px;
}

.one:before {
  content: "li:nth-child(1)";
}
.two:before {
  content: ":nth-child(2) :nth-child(3)";
}
.three:before {
  content: ":nth-child(odd) li:nth-child(-n+3)";
}

Luckily, you don’t always have to do the math yourself—there are several :nth-child testers and generators out there:

• CSS-Tricks Tester
• Lea Verou’s Tester

Points of Interest

• :nth-child iterates through elements starting from the top of the source order. The only difference between it and :nth-last-child is that the latter iterates through elements starting from the bottom of the source order.
• The syntax for selecting the first n number of elements is a bit counter-intuitive. You start with -n, plus the positive number of elements you want to select. For example, li:nth-child(-n+3) will select the first 3 li elements.
• The :nth-child selector is very similar to :nth-of-type but with one critical difference: it is less specific. In our example above they would produce the same result because we are iterating over only .module elements, but if we were iterating over a more complex group of siblings, :nth-child would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-child—it can select any sibling element in an arrangement, not only elements that are specified before the colon.

Fra stackoverflow.com (forum)

div {
  float: left;
  height: 50px;
  width: 33.33%;
  border: 1px solid;
}
div:nth-child(5n-1),
div:nth-child(5n) {
  width: 50%;
}
* {
  box-sizing: border-box;
}

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

Fra stackoverflow.com (forum)

li:nth-child(4n+1), li:nth-child(4n+2) {
  color: blue;
}

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Forth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Forth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ul>

Som hadde en variant, muligens bedre - you can select every fourth item minus 3 and 2 to include the first 2 one:

   li {
      color:red;
    }
li:nth-child(4n-3),
li:nth-child(4n-2)
{
  color:green
}

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Forth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
  <li>heigth item</li>
  <li>nineth item</li>
  <li>tenth item</li>

Fra stackoverflow.com (forum)

div { width: 50px; height: 50px; }
div:nth-child(odd) { background-color: red; }
div:nth-child(even) { background-color: blue; }

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Fra developer.mozilla.org

:nth-child()

Uses An+B notation to select elements from a list of sibling elements.

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

/* Selects the second 
 element in a list */
li:nth-child(2) {
  color: lime;
}

/* Selects every fourth element
   among any group of siblings */
:nth-child(4n) {
  color: lime;
}

Syntax

:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

Keyword values

odd

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

even

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

<An+B>

Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:
A is an integer step size,
B is an integer offset,
n is all positive integers, starting from 0.

It can be read as the An+Bth element of a list.

Formal syntax

Delt påå av meg. Var på 1 lang linje

:nth-child(  [ of  ]? )where  
=  | even | odd 
= #where  
=  [ ?  ]*where  
= [ ? * [ 
 * ]* ]! 
= '>' | '+' | '~' | [ '||' ]where  
=  | ? '*' 
=  |  |  |
  
= ':'  
= ':'  | ':'   ')'where  
= ?  
= [  | '*' ]?  |  
=  
= '.'  
= '['  ']' | '['   [  |  ]
 ? ']'where  
= [ '~' |  |  | '^' | '$' | '*' ]? '=' 
= i | s

Example selectors

tr:nth-child(odd) or tr:nth-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc.

tr:nth-child(even) or tr:nth-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc.

:nth-child(7)

Represents the seventh element.

:nth-child(5n)

Represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. The first one to be returned as a result of the formula is 0 [=5x0] , resulting in a no-match, since the elements are indexed from 1 , whereas n starts from 0 . This may seem weird at first, but it makes more sense when the B part of the formula is >0 , like in the next example.

:nth-child(n+7)

Represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.

:nth-child(3n+4)

Represents elements 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], etc.

:nth-child(-n+3)

Represents the first three elements. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Represents every <p> element in a group of siblings. This selects the same elements as a simple p selector (although with a higher specificity).

p:nth-child(1) or p:nth-child(0n+1)

Represents every <p> that is the first element in a group of siblings. This is the same as the :first-child selector (and has the same specificity).

p:nth-child(n+8):nth-child(-n+15)

Represents the eighth through the fifteenth <p> elements of a group of siblings.

Detailed example

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
   <code><em></code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, WITH an
   <code><em></code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
   3 is used in the counting because it is a child, but it isn't
   selected because it isn't a <code><span></code>.</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, WITH an
   <code><em></code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
   3 isn't used in the counting or selected because it is an <code><em></code>,
   not a <code><span></code>, and <code>nth-of-type</code> only selects
   children of that type. The <code><em></code> is completely skipped
   over and ignored.</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

w3schools: CSS :nth-child() Selector (Pseudo-class)

Definition and Usage

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.

Example

Specify a background color for every <p> element that is the second child of its parent:

p:nth-child(2) {
  background: red;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

https://flaviocopes.com/css-pseudo-classes/

You can also use it to target the first 3 children of an element with :nth-child(-n+3). Or you can style 1 in every 5 elements with :nth-child(5n).

code.tutsplus.com

FRA Live Demo of Nth Child and Type Selectors

div#xnch-container li:nth-child(2) {
  color: red;
}

<h2>X:nth-child(n)</h2>
<div id="xnch-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
        <li> Child </li>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>
  <ul>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
  </ul>
</div>

PB: Modifisert

:NTH-LAST-CHILD(N)

ELEMENT:NTH-LAST-CHILD = An <element> element provided it is the nth from the end child (formula) of its parent.

Fra css-tricks.com

The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements. It functions the same as :nth-child except it selects items starting at the bottom of the source order, not the top.

Suppose we have a list with an unknown number of items, and we wish to highlight the second-to-last item (in this exact example, the “Fourth Item”):

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Rather than doing something like adding a class to the list item (e.g. .highlight) we can use :nth-last-child:

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}

As you can see, :nth-last-child takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. If an integer is specified only one element is selected – but the keywords or a formula will iterate through all the children of the parent element and select matching elements—similar to navigating items in an array in JavaScript. Keywords “even” and “odd” are straightforward (2, 4, 6 etc or 1, 3, 5 respectively). The formula is constructed using the syntax an+b, where:

• “a” is an integer value
• “n” is the literal letter “n”
• “+” is an operator and may be either “+” or “-”
• “b” is an integer and is required if an operator is included in the formula

It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula 2n, which worked because every time an element was checked, “n” increased by one (2×0, 2×1, 2×2, 2×3, etc). If an element’s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read this article.

To illustrate further, here are some examples of valid :nth-last-of-type selectors:

body {
  padding: 1em 2em;
}

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  width: 12em;
  float: left;
  margin-right: 2em;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one li:nth-last-child(1) {
  background: lightsteelblue;
}

.two ol :nth-last-child(3) {
  background: lightsteelblue;
}

.three :nth-last-child(-n+2) :nth-last-child(1) {
  background: lightsteelblue;
}



div:before {
  font-family: monospace;
  white-space: nowrap;
  font-size: 12px;
}
div:after {
  font-style: italic;
}

.one:before {
  content: "li:nth-last-child(1)";
}
.one:after {
  content: "select 
 elements that are the last child of their parent";
}

.two:before {
  content: "ol :nth-last-child(3)";
}
.two:after {
  content: "select the third-from-last child element of an 
";
}

.three:before {
  content: ":nth-last-child(-n+2) :nth-last-child(-n+3)";
}
.three:after {
  content: "select the last 
 element inside the last two elements";
}

Fra developer.mozilla.org

:nth-last-child()

Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

/* Selects every fourth element
   among any group of siblings,
   counting backwards from the last one */
:nth-last-child(4n) {
  color: lime;
}

Note: This pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.

Syntax

The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

Keyword values

odd

Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.

even

Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

Functional notation

<An+B>

Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element, counting from the end, is 1. The values A and B must both be <integer>s.

Formal syntax

Det nedenfor var på 1 lang linje, delt opp av meg:

:nth-last-child(  [ of  ]? )where 
 =  | even | odd
 = #where 
 =  [ ?  ]*where 
 = [ ? * [  * ]* ]!
 = '>' | '+' | '~' | [ '||' ]where 
 =  | ? '*'
 =  |  |  | 
 = ':' 
 = ':'  | ':'   ')'where  = ? 
 = [  | '*' ]?  |  = 
 = '.' 
 = '['  ']' | '['   [  |  ] ? ']'where 
 = [ '~' |  |  | '^' | '$' | '*' ]? '='
 = i | s

Example selectors

tr:nth-last-child(odd) or tr:nth-last-child(2n+1)

Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.

tr:nth-last-child(even) or tr:nth-last-child(2n)

Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.

:nth-last-child(7)

Represents the seventh element, counting from the end.

:nth-last-child(5n)

Represents elements 5, 10, 15, etc., counting from the end.

:nth-last-child(3n+4)

Represents elements 4, 7, 10, 13, etc., counting from the end.

:nth-last-child(-n+3)

Represents the last three elements among a group of siblings.

p:nth-last-child(n) or p:nth-last-child(n+1)

Represents every <p> element among a group of siblings. This is the same as a simple p selector. (Since n starts at zero, while the last element begins at one, n and n+1 will both select the same elements.)

p:nth-last-child(1) or p:nth-last-child(0n+1)

Represents every <p> that is the first element among a group of siblings, counting from the end. This is the same as the :last-child selector.

Table Example

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n+3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>

Quantity query

A quantity query styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the nth-last-child pseudo-class and the general sibling combinator.

/* If there are at least three list items,
   style them all */
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

A list of four items (styled):

  
One
  
Two
  
Three
  
Four


A list of two items (unstyled):

  
One
  
Two

A list of four items (styled):

1. One
2. Two
3. Three
4. Four

A list of two items (unstyled):

1. One
2. Two

w3schools: CSS :nth-last-child() Selector (Pseudo-class)

Definition and Usage

The :nth-last-child(n) selector matches every element that is the nth child, regardless of type, of its parent, counting from the last child.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-last-of-type() selector to select the element that is the nth child, of a specified type, of its parent, counting from the last child.

Example

Specify a background color for every <p> element that is the second child of its parent, counting from the last child:

p:nth-last-child(2) {
  background: red;
} 

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

Example

Odd and even are keywords that can be used to match child elements whose index is odd or even.

Here, we specify two different background colors for odd and even <p> elements, counting from the last child:

p:nth-last-child(odd) {
  background: red;
}

p:nth-last-child(even) {
  background: blue;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>

Example

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Here, we specify a background color for all p elements whose index is a multiple of 3, counting from the last child:

p:nth-last-child(3n+0) {
  background: red;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

code.tutsplus.com

FRA Live Demo of Nth Child and Type Selectors

div#xnlch-container li:nth-last-child(2) {
  color: red; font-weight:bold;
}

<h2>X:nth-last-child(n)</h2>
<div id="xnlch-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
        <li> Child </li>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>
  <ul>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
  </ul>
</div>

PB: Modifisert

:NTH-LAST-OF-TYPE(N)

ELEMENT:LAST-OF-TYPE = An <element> element provided it is the last of its type in its parent.

Fra css-tricks.com

The :nth-last-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements. It functions the same as :nth-of-type except it selects items starting at the bottom of the source order, not the top.

Suppose we have an unordered list and wish to highlight the second-to-last item (in this exact example, the “Fourth Item”):

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Rather than doing something like adding a class to the list item (e.g. .highlight) we can use :nth-last-of-type:

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-of-type(2) {
  background: lightslategrey;
}

As you can see, :nth-last-of-type takes an argument: this can be a single integer, the keywords “even” or “odd”, or a formula. If an integer is specified only one element is selected — but the keywords or a formula will iterate through all the children of the parent element and select matching elements — similar to navigating items in an array in JavaScript. Keywords “even” and “odd” are straightforward (2, 4, 6, etc or 1, 3, 5 etc respectively). The formula is constructed using the syntax an+b, where:

• “a” is an integer value
• “n” is the literal letter “n”
• “+” is an operator and may be either “+” or “-”
• “b” is an integer and is required if an operator is included in the formula

It is important to note that this formula is an equation, and iterates through each sibling element, determining which will be selected. The “n” part of the formula, if included, represents a set of increasing positive integers (just like iterating through an array). In our above example, we selected every second element with the formula 2n, which worked because every time an element was checked, “n” increased by one (2×0, 2×1, 2×2, 2×3, etc). If an element’s order matches the result of the equation, it gets selected (2, 4, 6, etc). For a more in-depth explanation of the math involved, please read this article.

To illustrate further, here are some examples of valid :nth-last-of-type selectors:

body {
  padding: 1em 2em;
}

ul {
  list-style: none;
  width: 12em;
  border: 1px solid #444;
  padding: 0
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  float: left;
  margin-right: 2em;
}
pre {
  font-size: 14px;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.four li:nth-last-of-type(3) {
  background: lightsteelblue;
}

.five li:nth-last-of-type(3n+1) {
  background: lightsteelblue;
}

.six li:nth-last-of-type(even) {
  background: lightsteelblue;
}

PB: Lagt til flere*

Points of Interest

• :nth-last-of-type iterates through elements starting from the bottom of the source order. The only difference between it and :nth-of-type is that the latter iterates through elements starting from the bottom of the source order.
• The :nth-last-of-type selector is very similar to :nth-last-child but with one critical difference: it is more specific. In our example above they would produce the same result because we are iterating over only li elements, but if we were iterating over a more complex group of siblings, :nth-last-child would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-last-of-type—it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.

Fra developer.mozilla.org

:nth-last-of-type()

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backards from the end of the list.

The :nth-last-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings, counting from the end.

/* Selects every fourth 
 element
   among any group of siblings,
   counting backwards from the last one */
p:nth-last-of-type(4n) {
  color: lime;
}

Note: This pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning.

Syntax

The nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

See :nth-last-child for a more detailed explanation of its syntax.

Formal syntax.

:nth-last-of-type(  )where  =  | even | odd

Example

Styling elements with no siblings of the same type.

span:nth-last-of-type(2) {
  background-color: lime;
}

w3schools: CSS :nth-last-of-type() Selector (Pseudo-class)

Definition and Usage

The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-last-child() selector to select the element that is the nth child, regardless of type, of its parent, counting from the last child.

Example

Specify a background color for every <p> element that is the second p element of its parent, counting from the last child:

p:nth-last-of-type(2) {
  background: red;
}

Example

Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Here, we specify two different background colors for odd and even <p> elements:

p:nth-last-of-type(odd) {
  background: red;
}

p:nth-last-of-type(even) {
  background: blue;
}

Example

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Here, we specify a background color for all <p> elements whose index is a multiple of 3:

p:nth-last-of-type(3n+0) {
  background: red;
}

code.tutsplus.com

FRA Live Demo of Nth Child and Type Selectors

div#xnltp-container ul:nth-last-of-type(3) {
   border: 1px solid red;
}

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

body {
  padding: 1em 2em;
}

ul {
  list-style: none;
  width: 12em;
  border: 1px solid #444;
  padding: 0
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
}
div {
  float: left;
  margin-right: 2em;
}
pre {
  font-size: 14px;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one li:nth-of-type(1) {
  background: lightsteelblue;
}

.two li:nth-of-type(odd) {
  background: lightsteelblue;
}

.three li:nth-of-type(3n+2) {
  background: lightsteelblue;
}

/* Selects every fourth 
 element
   among any group of siblings */
p:nth-of-type(4n) {
  color: lime;
}

:nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* This has no effect, as the .fancy class is only on the 4th p element, not the 1st */
p.fancy:nth-of-type(1) {
  text-decoration: underline;
}

p:nth-of-type(2) {
  background: red;
}

p:nth-of-type(odd) {
  background: red;
}

p:nth-of-type(even) {
  background: blue;
}

p:nth-of-type(3n+0) {
  background: red;
}

p:nth-of-type(3n+1) {
  background: red;
}

div#xntp-container ul:nth-of-type(3) {
   border: 1px solid red;
}

<h2>X:nth-of-type(n)</h2>
<div id="xntp-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
        <li> Child </li>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>
  <ul>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
    <li><a href="#"> Anchor Tag </a></li>
  </ul>
  <ul>
    <li> List Items </li>
    <li> List Items </li>
    <li> List Items </li>
  </ul>
</div>

p:only-of-type {
  color: red;
}

ul {
  border: 1px solid #ccc;
  margin: 20px;
  padding: 10px 10px 10px 30px;
}

li:only-of-type {
  color: red;
}

div {
  border: 1px solid #ccc;
  margin: 20px;
  padding: 10px 10px 10px 30px;
}

p:only-of-type {
  color: red;
}

/* Selects each <p>, but only if it is the */
/* only <p> element inside its parent */
p:only-of-type {
  background-color: lime;
}

:only-of-type

main :only-of-type {
  color: red;
}

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

p:only-of-type {
  background: red;
}

<div>
<p>This is a paragraph.</p>
</div>

<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>

div#xot-container div p:only-of-type {
  color: red;
}

div#xot-container li:only-of-type {
  font-weight: bold;
}

<h2>X:only-of-type</h2>
<div id="xot-container">
  <div>
    <p> My paragraph here. </p>
    <ul>
      <li> List Item </li>
      <li> List Item </li>
    </ul>
  </div>
  <div>
    <p> Two paragraphs total. </p>
    <p> Two paragraphs total. </p>
    <ul>
      <li> List Item </li>
    </ul>
  </div>
</div>

div p:only-child {
  color: red;
}

p:only-child {
  color:red;
}

div.contain div:only-child :first-child {
  color: red;
}

div.contain div:only-child {
  color: red;
}

<div class="contain">
  <div>
    <h1>Div Child 1</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 2</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>

  <div>
    <h1>Div Child 3</h1>
    <p>paragraph1</p>
    <p>paragraph2</p>
  </div>
</div>

/* Selects each 
, but only if it is the */
/* only child of its parent */
p:only-child {
  background-color: lime;
}

:only-child

div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>I am the 3rd sibling, <div>but this is an only child.</div></div>
</div>

li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}

<ol>
  <li>First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>

p:only-child {
  background: red;
}

<div><p>This is a paragraph.</p></div>

<div><span>This is a span.</span><p>This is a paragraph.</p></div>

div#xnltp-container ul:nth-last-of-type(3) {
   border: 1px solid red;
}

<h2>X:only-child</h2>
<div id="xoch-container">
  <div>
    <p> My paragraph here. </p>
  </div>
  <div>
    <p> Two paragraphs total. </p>
    <p> Two paragraphs total. </p>
  </div>
</div>

input[type=text]:optional {
  border: 1px solid #eee;
}

* {
  box-sizing: border-box;
}

:optional {
  opacity: 0.4;
  transition: .2s;
}

:optional:hover {
  opacity: 1;
}

form {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  background: #EFEFEF;
  padding: 1em;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.inline {
  display: inline;
  margin-right: 1em;
}

input[type="text"] {
  padding: 5px;
  width: 100%;
  border: 1px solid silver;
}

input[type=submit] {
  background: deepskyblue;
  color: white;
  padding:10px 0;
  border-color: rgba(0,0,0,.1);
  font-weight: bold;
  opacity: 1;
  width: 100%;
}

select {
  width: 100%;
  border: 1px solid silver;
  padding: 5px;
}

@import url(hxtxtxpx://xxxxxxxxxxxx_weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

<form>
  <p>
    <label for="first-name"><span class="fontawesome-user"></span> Name</label>
    <input type="text" id="name" placeholder="John Doe" />
  </p>
  <p>
    <label for="email"><span class="fontawesome-envelope"></span> Email</label>
    <input type="text" id="email" placeholder="john.doe@gmail.com" required />
  </p>
  <p>
    <input type="radio" name="gender" id="man" /> <label class="inline" for="man">Man</label>
    <input type="radio" name="gender" id="woman" /> <label class="inline" for="woman">Woman</label>
  </p>
  <p>
    <label for="continent"><span class="fontawesome-globe"></span> Continent</label>
    <select id="continent">
      <option value="0">Continent</option>
      <option value="1">North America</option>
      <option value="2">South America</option>
      <option value="3">Europe</option>
      <option value="4">Africa</option>
      <option value="5">Asia</option>
      <option value="6">Oceania</option>
    </select>
  </p>
  <p>
    <input type="submit" value="Sign up" />
  </p>
</form>

input:optional {
  background-color: blue;
}

<form>
  Subject: <input type="text" name="subject"><br>
  Student: <input type= text" name="student" required><br>
</form>

/* Selects any optional <input> */
input:optional {
  border: 1px dashed black;
}

:optional

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input">
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required>
  </div>
</form>

input:optional {
  background-color: yellow;
}

<h3>A demonstration of the :optional selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p>The :optional selector selects form elements with no "required" attribute.</p>

<p><strong>Note:</strong> The :optional selector is not supported in Internet Explorer 9 or earlier versions.</p>

<input type="number" min="5" max="10">

input:out-of-range {
  border: 5px solid red;
}

/* Selects any <input>, but only when it has a range
   specified, and its value is outside that range */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

:out-of-range

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}

<form action="" id="form1">
 <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

input:out-of-range {
  border: 2px solid red;
}

<h3>A demonstration of the :out-of-range selector.</h3>

<input type="number" min="5" max="10" value="17">

<p>Try typing a number within the given range (between 5 and 10), to see the styling disappear.</p>

::-webkit-input-placeholder { /* Edge */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: red;
}

::placeholder {
  color: red;
}

<p>Use the ::placeholder selector to change the color of the placeholder text:</p>

<input type="text" name="fname" placeholder="First name">

::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}

<p>Change the placeholder color:</p>

<input type="text" placeholder="A red placeholder text..">

input:read-only {
  background-color: yellow;
}

<h3>A demonstration of the :read-only selector.</h3>

<p>A normal input element:<br><input value="hello"></p>

<p>A readonly input element:<br><input readonly value="hello"></p>

<p>The :read-only selector selects form elements with a "readonly" attribute.</p>

input:read-write {
  background-color: yellow;
}

<h3>A demonstration of the :read-write selector.</h3>

<p>A normal input element:<br><input value="hello"></p>

<p>A readonly input element:<br><input readonly value="hello"></p>

<p>The :read-write selector selects form elements with no "readonly" attribute.</p>

<input type="name" name="fname" required>

/* style all elements with a required attribute */
:required {
  background: red;
}

/* style all input elements with a required attribute */
input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

/**
 * style input elements that have a required
 * attribute and a focus state
 */
input:required:focus {
  border: 1px solid red;
  outline: none;
}

/**
 * style input elements that have a required
 * attribute and a hover state
 */
input:required:hover {
  opacity: 1;
}

input:required,
textarea:required {
  border-color: red !important;
}
input:required + label {
  color: red;
}

form {
  padding: 20px; 
  max-width: 500px;
  margin: 0 auto;
}
form div {
  padding: 5px;
}
label {
  display: block;
}
input + label {
  display: inline-block;
  margin-right: 10px;
}

input[type=text],
input[type=email],
textarea {
  border: 1px solid #999;
  padding: 5px;
  width: 100%;
}

<input type="name" name="fname" required="">
<input type="name" name="fname" required="required">

<input type="text" name="someInput" required>

<input type="text" name="someInput" required="required">

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:required {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <form>
         Subject: <input type="text" name="subject" value="C++"><br>
         Student: <input type="text" name="student" value="Amit" required><br>
      </form>
   </body>
</html>

/* Selects any required <input> */
input:required {
  border: 1px dashed red;
}

:required

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input">
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required>
  </div>
</form>

input:required {
  background-color: yellow;
}

<h3>A demonstration of the :required selector.</h3>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>

<p>The :required selector selects form elements with a "required" attribute.</p>

<p>The :required selector is not supported in Internet Explorer 9 or earlier versions.</p>

:root {
  background-color: cornflowerblue;
  padding: 3em;
}

body {
  background-color: white;
  padding: 1.5em;
}

<!DOCTYPE html>
<html>
   <head>
      <style>
         :root {
            background: blue;
            color: white;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <p>This is demo text.</p>
   </body>
</html>

/* Selects the root element of the document:
    in the case of HTML */
:root {
  background: yellow;
}

:root

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

:root {
  background: #f0fff0;;
}

<h1>This is a heading</h1>

p::-moz-selection { color: red}
p::selection { color: red; }

::-moz-selection { background: yellow; }
::selection { background: yellow; }

.example-color::selection {
  color: #8e44ad;
}
.example-background-color::selection {
  background-color: #f1c40f;
}
.example-background::selection {
  background: #e74c3c;
}
.example-both::selection {
  background-color: #8e44ad;
  color: white;
}
.example-shadow::selection {
  text-shadow: 1px 1px 0 #27ae60;
}
.example-input::selection {
  background: #2ecc71;
}
.example-textarea::selection {
  background: #34495e;
  color: white;
}
body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  line-height: 1.45;
  background: #E0DCCC;
  color: #333;
  padding: 1em;
  font-size: 18px;
}

p,input,textarea  {
  margin-bottom: 1em;
}
input,textarea {
  display: block;
  font-size: 1em;
  font-family: inherit;
}

<p>Select me to see normal behavior.</p>
<p class='example-color'>Try selecting me for a different text color.</p>
<p class='example-background-color'>You can select me for a different background color.</p>
<p class='example-background'>You can also select me for a different background.</p>
<p class='example-both'>Guess what… you can select me for a different background color and text color.</p>
<p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>
<p class='example-background-color'>
  What about nest elements? Select me for a different background color.
  <span class='example-color'>And this sentence is just a color selection.</span>
  Nesting works!
</p>
<input class='example-input' type='text' value='Inputs work!*'>
<textarea class='example-textarea' cols='30' name='' rows='10'>Textarea, too!*</textarea>
<div class='foot-notes'>*not Safari</div>

p::-moz-selection,
p::selection { color: red; }

body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  line-height: 1.45;
  background: #E0DCCC;
  color: #333;
  padding: 1em;
}
p {
  font-size: 2em;
  font-weight: 900;
  margin-bottom: 1em;
  text-shadow: 1px 2px 1px #C79292;
}

p::selection {
  background: lightblue;
}

.example::selection {
  text-shadow: none;
}

<p>On selection, this text-shadow stays on.</p>
<p class="example">On selection, this text-shadow is set to none.</p>

:target {
  border: 2px solid #D4D4D4;
  background-color: orange;
  color: white;
}

<p>Click any of the subject below.</p>
<p><a href = "#tut1">Maths</a></p>
<p><a href = "#tut2">Java</a></p>
<p><a href = "#tut3">C++</a></p>
<p><a href = "#tut4">C</a></p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p id = "tut1"><b>Maths Tutorial</b></p>
<p id = "tut2"><b>Java Tutorial</b></p>
<p id = "tut3"><b>C++ Tutorial</b></p>
<p id = "tut4"><b>C Tutorial</b></p>

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

:target

p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

<h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

/* Unopened lightbox */
.lightbox {
  display: none;
}

/* Opened lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <p>Hello World!</p>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
  from {top:-100px;opacity: 0;}
  to {top:0px;opacity:1;}
}

/* Add animation (Standard syntax) */
@keyframes example {
  from {top:-100px;opacity: 0;}
  to {top:0px;opacity:1;}
}

/* The modal's background */
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
.modal:target {
  display: table;
  position: absolute;
}

/* The modal box */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}

/* The modal's content */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  /* Add animation */
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 0.5s;
}

/* The button used to close the modal */
.closebtn {
  text-decoration: none;
  float: right;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
}

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.container {
  padding: 2px 16px;
}

header {
  background-color: #5cb85c;
  font-size: 25px;
  color: white;
}

footer {
  background-color: #5cb85c;
  font-size: 20px;
  color: white;
}

<a href="#id01">Open Modal</a>

<div id="id01" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <header class="container">
        <a href="#" class="closebtn">×</a>
        <h2>Modal Header</h2>
      </header>
      <div class="container">
        <p>Some text in the modal.</p>
        <p>Some text in the modal.</p>
      </div>
      <footer class="container">
        <p>Modal footer</p>
      </footer>
    </div>
  </div>
</div>

input:valid {
  background: red;
  color: white;
}

<h2>Heading</h2>
<input type = "email" value = "amit@example.com">
<p>The style (red color background) appears if you type a relevant/ valid email address.</p>

/* Selects any valid <input> */
input:valid {
  background-color: powderblue;
}

:valid

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: '✖';
  color: red;
}

input:valid + span::before {
  content: '✓';
  color: green;
}

<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required>
  <span></span>
</div>

input:valid {
  background-color: yellow;
}

<input type="email" value="support@example.com">

<input type="text" value="support...">

a:link, a:visited {
  background-color: white;
  color: black;
  border: 1px solid blue;
  padding: 30px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
  color: white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

a:visited {
  color: maroon;
}

<a href="https://www.w3schools.com">W3Schools Home</a> DENNE***<br>
<a href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a><br>
<a href="https://www.w3schools.com/css/">W3Schools CSS Tutorial</a>

a[target] {
  background-color: yellow;
}

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

a[target=_blank] {
  background-color: yellow;
}

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

[title~=flower] {
  border: 5px solid yellow;
}

<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

[class|=top] {
  background: yellow;
}

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

[class^="top"] {
  background: yellow;
}

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

[class$="test"] {
  background: yellow;
}

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

[class*="te"] {
  background: yellow;
}

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

input[type=text] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type=button] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

<h2>Styling Forms</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

Checkbox



Radio



Switch

.class    {   }
p.class   {   }

p.stand-out { background: yellow; }
span.stand-out { font-weight: bold; }

.class div { color: red; }

div.class  { color: green; }

div.container

#form

input.form-control

h6.form-header

div.form-check

label.form-check-label

input.form-check-input

div.form-radio

label.form-radio-label

input.form-radio-input

textarea.form-control

div.form-group

button.btn

label.form-label

div p {
  background-color: yellow;
}

<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

div > p {
  background-color: yellow;
}

<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

div + p {
  background-color: yellow;
}

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

div ~ p {
  background-color: yellow;
}

<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

h1 ~ h3

div > span

#red {
   color: red;
}
.green {
   background: green;
}
ul:nth-of-type(1) {
   background: rgb(0, 174, 255);
}
ul + h3 {
   border: 4px solid rgb(19, 0, 128);
}
a[href="https://www.wikipedia.org"] {
   font-size: 25px;
}
h1 ~ h3 {
   font-size: 40px;
}
div > span {
   background-color: DodgerBlue;
}

<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>

* {
  font-family: "Lato";
}

h2 {
  margin: 4rem 0 0 0;
}

div#xvl-container a:link { color: red; }
div#xvl-container a:visited { color: green; }

div#xchk-container input[type=radio]:checked + label {
  color: blue;
}

div#xnot-container div:not(#container) {
      color: blue;
   }

div#xnot-container * *:not(p) {
  color: green;
}

div#xpsel-container p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

div#xpsel-container p::first-letter {
  float: left;
  font-weight: bold;
  font-family: cursive;
  font-size: 2em;
  padding-right: 2px;
}