From 33a9979d537b9d2756e2638edd01fee901bb0a87 Mon Sep 17 00:00:00 2001 From: Strange-can <179990912+Strange-can@users.noreply.github.com> Date: Wed, 2 Oct 2024 07:15:13 +0800 Subject: [PATCH] Advanced Selectors: Fix link hrefs (#28883) CSS Tricks changed location of their articles - updated --- .../advanced_selectors.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/intermediate_html_css/intermediate_css_concepts/advanced_selectors.md b/intermediate_html_css/intermediate_css_concepts/advanced_selectors.md index 17663665317..45f638ac3e8 100644 --- a/intermediate_html_css/intermediate_css_concepts/advanced_selectors.md +++ b/intermediate_html_css/intermediate_css_concepts/advanced_selectors.md @@ -110,13 +110,13 @@ As always don't forget to check [MDN's docs on pseudo-classes](https://developer These types of useful pseudo-classes can make your page feel much more dynamic and interactive. -[`:focus`](https://css-tricks.com/almanac/selectors/f/focus/) applies to an element that is currently selected by the user either through selecting it with their cursor or using their keyboard. +[`:focus`](https://css-tricks.com/almanac/pseudo-selectors/f/focus/) applies to an element that is currently selected by the user either through selecting it with their cursor or using their keyboard. -[`:hover`](https://css-tricks.com/almanac/selectors/h/hover/) will affect anything under the user's mouse pointer. It can be used to give extra oomph to buttons and links to highlight that they're interactable, or to trigger a drop-down menu. +[`:hover`](https://css-tricks.com/almanac/pseudo-selectors/h/hover/) will affect anything under the user's mouse pointer. It can be used to give extra oomph to buttons and links to highlight that they're interactable, or to trigger a drop-down menu. -[`:active`](https://css-tricks.com/almanac/selectors/a/active/) applies to elements that are currently being clicked, and is especially useful for giving your user feedback that their action had an effect. This is a great one to give your buttons and other interactive elements more 'tactile' feedback. +[`:active`](https://css-tricks.com/almanac/pseudo-selectors/a/active/) applies to elements that are currently being clicked, and is especially useful for giving your user feedback that their action had an effect. This is a great one to give your buttons and other interactive elements more 'tactile' feedback. -Have you ever wondered why links are blue but turn purple when clicked in unstyled HTML? It's because browsers implement that styling by default. To implement your own custom styling for links, take advantage of the [`:link`](https://css-tricks.com/almanac/selectors/l/link/) and [`:visited`](https://css-tricks.com/almanac/selectors/v/visited/) pseudo-classes. A simplified version of default browser styling might look something like this: +Have you ever wondered why links are blue but turn purple when clicked in unstyled HTML? It's because browsers implement that styling by default. To implement your own custom styling for links, take advantage of the [`:link`](https://css-tricks.com/almanac/pseudo-selectors/l/link/) and [`:visited`](https://css-tricks.com/almanac/pseudo-selectors/v/visited/) pseudo-classes. A simplified version of default browser styling might look something like this: ```css /* This rule will apply to all links */ @@ -139,15 +139,15 @@ Have you ever wondered why links are blue but turn purple when clicked in unstyl Structural pseudo-classes are a powerful way to select elements based on their position within the DOM. -[`:root`](https://css-tricks.com/almanac/selectors/r/root/) is a special class that represents the very top level of your document - the one element that has no parents. Generally when working with the web, this is equivalent to the `html` element, but there are a [few subtle differences between `:root` and `html`](https://stackoverflow.com/questions/15899615/whats-the-difference-between-css3s-root-pseudo-class-and-html). +[`:root`](https://css-tricks.com/almanac/pseudo-selectors/r/root/) is a special class that represents the very top level of your document - the one element that has no parents. Generally when working with the web, this is equivalent to the `html` element, but there are a [few subtle differences between `:root` and `html`](https://stackoverflow.com/questions/15899615/whats-the-difference-between-css3s-root-pseudo-class-and-html). `:root` is generally the place where you will place your 'global' CSS rules that you want available everywhere - such as your custom properties and CSS variables, or rules such as `box-sizing: border-box;`. -[`:first-child`](https://css-tricks.com/almanac/selectors/f/first-child/) and [`:last-child`](https://css-tricks.com/almanac/selectors/l/last-child/) will match elements that are the first or last sibling. +[`:first-child`](https://css-tricks.com/almanac/pseudo-selectors/f/first-child/) and [`:last-child`](https://css-tricks.com/almanac/pseudo-selectors/l/last-child/) will match elements that are the first or last sibling. -Similarly, [`:empty`](https://css-tricks.com/almanac/selectors/e/empty/) will match elements that have no children at all, and [`:only-child`](https://css-tricks.com/almanac/selectors/o/only-child/) will match elements that don't have any siblings. +Similarly, [`:empty`](https://css-tricks.com/almanac/pseudo-selectors/e/empty/) will match elements that have no children at all, and [`:only-child`](https://css-tricks.com/almanac/pseudo-selectors/o/only-child/) will match elements that don't have any siblings. -For a more dynamic approach we can use [`:nth-child`](https://css-tricks.com/almanac/selectors/n/nth-child/). This is a flexible pseudo-class with a few different uses. +For a more dynamic approach we can use [`:nth-child`](https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/). This is a flexible pseudo-class with a few different uses. ```css .myList:nth-child(5) {/* Selects the 5th element with class myList */} @@ -163,13 +163,13 @@ For a more dynamic approach we can use [ While pseudo-classes give us an alternative way to interact with our HTML elements based on their state or structure, pseudo-elements are more abstract. They allow us to affect parts of our HTML that aren't elements at all. These special elements share the same specificity as regular elements (0, 0, 0, 1). There are a number of useful pseudo-elements that can be utilized in any number of creative ways. -[`::marker`](https://css-tricks.com/almanac/selectors/m/marker/) allows you to customize the styling of your `
  • ` elements' bullets or numbers. +[`::marker`](https://css-tricks.com/almanac/pseudo-selectors/m/marker/) allows you to customize the styling of your `
  • ` elements' bullets or numbers. -[`::first-letter`](https://css-tricks.com/almanac/selectors/f/first-letter/) and [`::first-line`](https://css-tricks.com/almanac/selectors/f/first-line/) allow you to (you guessed it!) give special styling to the first letter or line of some text. +[`::first-letter`](https://css-tricks.com/almanac/pseudo-selectors/f/first-letter/) and [`::first-line`](https://css-tricks.com/almanac/pseudo-selectors/f/first-line/) allow you to (you guessed it!) give special styling to the first letter or line of some text. -[`::selection`](https://css-tricks.com/almanac/selectors/s/selection/) allows you to change the highlighting when a user selects text on the page. +[`::selection`](https://css-tricks.com/almanac/pseudo-selectors/s/selection/) allows you to change the highlighting when a user selects text on the page. -[`::before` and `::after`](https://css-tricks.com/almanac/selectors/a/after-and-before/) allow us to add extra elements onto the page with CSS, instead of HTML. Using it to decorate text in various ways is one common use case. +[`::before` and `::after`](https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/) allow us to add extra elements onto the page with CSS, instead of HTML. Using it to decorate text in various ways is one common use case. ```html