Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
CSS - Week 3
WTWD 210 - CSS
| Term | Definition | Example |
|---|---|---|
| Attribute Selector | Selects elements based on an attribute or attribute value. | input[type="text"] { width: 100%; } |
| Exact Attribute Selector | Selects elements with an attribute that exactly matches a specified value. | a[target="_blank"] { color: blue; } |
| Contains Word Attribute Selector | Selects elements with an attribute whose value is a space-separated list of words one of which is exactly equal to the specified value. | [class~="highlight"] { background-color: yellow; } |
| Starts with and Hyphen Attribute Selector | Selects elements with an attribute whose value is exactly equal to the specified value or starts with the specified value followed by a hyphen (-). | [lang|="en"] { color: green; } |
| Starts with Attribute Selector | Selects elements with an attribute whose value starts with the specified value. | a[href^="https"] { color: red; } |
| Ends with Attribute Selector | Selects elements with an attribute whose value ends with the specified value. | a[href$=".pdf"] { color: blue; } |
| Contains Substring Attribute Selector | Selects elements with an attribute whose value contains the specified substring. | a[href*="example"] { color: purple; } |
| Pseudo-Class | Selects elements based on their state. | a:hover { color: red; } |
| Pseudo-Element | Pseudo-elements are used to style specific parts of an element's content. They allow you to create and style elements that do not exist in the HTML markup. CSS pseudo-elements are prefixed with two colons (::) to distinguish them from pseudo-classes. | p::first-letter { font-size: 2em; color: red; float: left; margin-right: 0.1em; } |
| ::before | Inserts content before an element's content. | p::before { content: " Note: "; } |
| ::after | Inserts content before an element's content. | p::after { content: " End."; } |
| ::first-line | The ::first-line pseudo-element is used to apply special styles to the first line of a block-level element. | p::first-line { font-weight: bold; color: blue; } |
| ::first-letter | The ::first-letter pseudo-element is used to apply special styles to the first letter of a block-level element. | p::first-letter { font-size: 2em; color: red; float: left; margin-right: 0.1em; } |
| ::selection | The ::selection pseudo-element applies styles to the portion of an element that is selected by the user (e.g. highlighted text). | ::selection { background: yellow; color: black; } |
| ::placeholder | The ::placeholder pseudo-element applies styles to the placeholder text in an input element. | input::placeholder { color: gray; font-style: italic; } |
| ::marker | The ::marker pseudo-element applies styles to the markers of list items. | li::marker { color: red; font-size: 1.5em; } |
| ::backdrop | The ::backdrop pseudo-element applies styles to the backdrop of an element typically used in full-screen mode. | dialog::backdrop { background-color: rgba(0, 0, 0, 0.8); } |
| :focus | Applies styles to an element that has focus. | input:focus { border-color: blue; } |
| :hover | Applies styles when the user hovers over an element. | a:hover { color: red; } |
| :link | Selects all unvisited links. | a:link { color: blue; } |
| :visited | Selects all visited links. | a:visited { color: purple; } |
| :active | Selects the active link. | a:active { color: orange; } |
| :first-child | Applies styles to the first child of its parent. | li:first-child { color: green; } |
| :last-child | Applies styles to the last child of its parent. | li:last-child { color: blue; } |
| :nth-child(n) | Selects the nth child of its parent. | li:nth-child(2) { color: blue; } |
| :nth-of-type(n) | Matches elements of a specific type based on their nth position in a parent element. | p:nth-of-type(2) { color: orange; } |
| :not(selector) | Selects every element that does not match the specified selector. | :not(p) { margin: 0; } a:not(.classname) { color: red; } |
Created by:
ProfJordan
Popular Computers sets