title
Lorem ipsum dolor sit amet
This paragraph will be selected
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
title
This paragraph will be selected
Lorem ipsum dolor sit amet
This paragraph will be selected
Lorem ipsum dolor sit amet
``` ### Adjacent sibling selector (`+`) Selects an element that follows directly after the prior element. Both elements share the same parent. ```css h2 + p { property: value; } ``` ```htmlLorem ipsum dolor sit amet
title
This paragraph will be selected
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
``` ### Namespace Separator (`|`) The **namespace** separator separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector. ```css @namespaceThis paragraph has a link.
``` ### Column Selector (`||`) The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first. ```css column-selector || cell-selector { property: value; } ``` ### Attribute Present Selector (`tag[attr]`) `a[target]{ property: value; }` will match ```html click here ``` ### Attribute Equals Selector (`=`) `a[href="https://google.com"] { property: value; }` will match ```html search on google ``` ### Attribute Contains Selector (`*=`) `a[href*="login"] { property: value; }` will match ```html login page ``` ### Attribute Begins With Selector (`^=`) `a[href^="Https://"] { property: value; }` will match ```html The BBC ``` ### Attribute Ends With Selector (`$=`) `a[href$=".pdf"] { property: value; }` ```html download menu download song ``` ### Attribute Spaced Selector (`~=`) `img[alt~="child"] { property: value; }` ```html
```
### Attribute Hyphenated Selector (`|=`)
`p[lang|="en"] { property: value; }`
```html
English
American english
Français
``` ## [Pseudo-Classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) Pseudo-classes can style elements based on their current state. They must be specified after the base case. ```css selector:pseudo-class { property: value; } ``` ### Link Pseudo-Classes `a:link {...}` selects only `` tags that have `href` attribute, same as `a[href]`. `a:visited {...}` selects links that have already been visited by the current browser. ### User Action Pseudo-Classes `a:hover {...}` selects a link when the mouse rolls over it (hover state). `a:active {...}` selects the link while it's being activated (clicked or otherwise). `selector:focus {...}` selects an element when the user focuses on it (e.g. tab w/ keyboard). Often used on links, inputs, text-areas. ### User Interface State Pseudo-Classes `input:enabled {...}` selects an input that is in the default state of enabled and available for use. `input:disabled {...}` selects an input that has the attribute. `input:checked {...}` selects checkboxes or radio buttons that are checked. `input:indeterminate {...}` selects checkboxes or radio button that has neither selected nor unselected. ### Structural & Position Pseudo-Classes `selector:first-child {...}` selects an element if it's the first child within its parent. `selector:last-child {...}` selects an element if it's the last element within its parent. `selector:only-child {...}` will select an element if it is the only element within a parent. `selector:first-of-type {...}` selects the first element of its type within a parent. `selector:last-of-type {...}` selects the last element of its type within a parent. `selector:only-of-type {...}` selects an element if it is the only of its type within a parent. `selector:nth-child() {...}` selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Can select even/odd elements, "every third", "the first five", etc. `selector:nth-of-type() {...}` works like `:nth-child` in places where the elements at the same level are of different types. `selector:nth-last-of-type() {...}` like `:nth-of-type` but counts up from the bottom instead of the top. `selector:nth-last-child() {...}` like `:nth-child` but counts up from the bottom instead of the top. ### Empty & Negation Pseudo-Classes `selector:empty {...}` selects elements with no content (empty tags). `selector:not() {...}` selects elements that do not have a certain tag, attribute, class, ID, etc. ## [Pseudo-Elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) Dynamic elements that don't exist in the document tree. When used within selectors allow unique parts of the page to be stylized. Only one pseudo-element may be used within a selector at a given time. ### Textual Pseudo-Elements `selector::first-letter {...}` selects the first letter of the text within an element. `selector::first-line {...}` selects the first line of text within an element. ### Content Pseudo-Elements `selector::before {...}` creates a pseudo-element before, or in front of, the selected element. `selector::after {...}` creates a pseudo-element after, or behind, the selected element. **These pseudo-elements appear nested within the selected element, not outside of it.** ```css selector::