diff --git a/docs/src/markdown/about/changelog.md b/docs/src/markdown/about/changelog.md
index bbff9a1..46a9076 100644
--- a/docs/src/markdown/about/changelog.md
+++ b/docs/src/markdown/about/changelog.md
@@ -1,312 +1,319 @@
 # Changelog
 
+## 2.5
+
+-   **NEW**: Update to support Python 3.12.
+-   **NEW**: Drop support for Python 3.7.
+
 ## 2.4.1
 
-- **FIX**: Attribute syntax for case insensitive flag optionally allows a space, it does not require one.
+-   **FIX**: Attribute syntax for case insensitive flag optionally allows a space, it does not require one.
 
 ## 2.4
 
-- **NEW**: Update to support changes related to `:lang()` in the official CSS spec. `:lang("")` should match unspecified
-  languages, e.g. `lang=""`, but not `lang=und`.
-- **NEW**: Only `:is()` and `:where()` should allow forgiving selector lists according to latest CSS (as far as Soup
-  Sieve supports "forgiving" which is limited to empty selectors).
-- **NEW**: Formally drop Python 3.6.
-- **NEW**: Formally declare support for Python 3.11.
+-   **NEW**: Update to support changes related to `:lang()` in the official CSS spec. `:lang("")` should match
+    unspecified languages, e.g. `lang=""`, but not `lang=und`.
+-   **NEW**: Only `:is()` and `:where()` should allow forgiving selector lists according to latest CSS (as far as Soup
+    Sieve supports "forgiving" which is limited to empty selectors).
+-   **NEW**: Formally drop Python 3.6.
+-   **NEW**: Formally declare support for Python 3.11.
 
 ## 2.3.2.post1
 
-- **FIX**: Documentation for installation from source is outdated.
+-   **FIX**: Documentation for installation from source is outdated.
 
 ## 2.3.2
 
-- **FIX**: Fix some typos in error messages.
+-   **FIX**: Fix some typos in error messages.
 
 ## 2.3.1
 
-- **FIX**: Ensure attribute selectors match tags that have new line characters in attributes. (#233)
+-   **FIX**: Ensure attribute selectors match tags that have new line characters in attributes. (#233)
 
 ## 2.3
 
-- **NEW**: Officially support Python 3.10.
-- **NEW**: Add static typing.
-- **NEW**: `:has()`, `:is()`, and `:where()` now use use a forgiving selector list. While not as forgiving as CSS might
-  be, it will forgive such things as empty sets and empty slots due to multiple consecutive commas, leading commas, or
-  trailing commas. Essentially, these pseudo-classes will match all non-empty selectors and ignore empty ones. As the
-  scraping environment is different than a browser environment, it was chosen not to aggressively forgive bad syntax and
-  invalid features to ensure the user is alerted that their program may not perform as expected.
-- **NEW**: Add support to output a pretty print format of a compiled `SelectorList` for debug purposes.
-- **FIX**: Some small corner cases discovered with static typing.
+-   **NEW**: Officially support Python 3.10.
+-   **NEW**: Add static typing.
+-   **NEW**: `:has()`, `:is()`, and `:where()` now use use a forgiving selector list. While not as forgiving as CSS
+    might be, it will forgive such things as empty sets and empty slots due to multiple consecutive commas, leading
+    commas, or trailing commas. Essentially, these pseudo-classes will match all non-empty selectors and ignore empty
+    ones. As the scraping environment is different than a browser environment, it was chosen not to aggressively forgive
+    bad syntax and invalid features to ensure the user is alerted that their program may not perform as expected.
+-   **NEW**: Add support to output a pretty print format of a compiled `SelectorList` for debug purposes.
+-   **FIX**: Some small corner cases discovered with static typing.
 
 ## 2.2.1
 
-- **FIX**: Fix an issue with namespaces when one of the keys is `self`.
+-   **FIX**: Fix an issue with namespaces when one of the keys is `self`.
 
 ## 2.2
 
-- **NEW**: `:link` and `:any-link` no longer include `#!html <link>` due to a change in the level 4 selector
-  specification. This actually yields more sane results.
-- **FIX**: BeautifulSoup, when using `find`, is quite forgiving of odd types that a user may place in an element's
-  attribute value. Soup Sieve will also now be more forgiving and attempt to match these unexpected values in a sane
-  manner by normalizing them before compare. (#212)
+-   **NEW**: `:link` and `:any-link` no longer include `#!html <link>` due to a change in the level 4 selector
+    specification. This actually yields more sane results.
+-   **FIX**: BeautifulSoup, when using `find`, is quite forgiving of odd types that a user may place in an element's
+    attribute value. Soup Sieve will also now be more forgiving and attempt to match these unexpected values in a sane
+    manner by normalizing them before compare. (#212)
 
 ## 2.1
 
-- **NEW**: Officially support Python 3.9.
-- **NEW**: Drop official support for Python 3.5.
-- **NEW**: In order to avoid conflicts with future CSS specification changes, non-standard pseudo classes will now start
-  with the `:-soup-` prefix. As a consequence, `:contains()` will now be known as `:-soup-contains()`, though for a time
-  the deprecated form of `:contains()` will still be allowed with a warning that users should migrate over to
-  `:-soup-contains()`.
-- **NEW**: Added new non-standard pseudo class `:-soup-contains-own()` which operates similar to `:-soup-contains()`
-  except that it only looks at text nodes directly associated with the currently scoped element and not its descendants.
-- **FIX**: Import `bs4` globally instead of in local functions as it appears there are no adverse affects due to
-  circular imports as `bs4` does not immediately reference `soupsieve` functions and `soupsieve` does not immediately
-  reference `bs4` functions. This should give a performance boost to functions that had previously included `bs4`
-  locally.
+-   **NEW**: Officially support Python 3.9.
+-   **NEW**: Drop official support for Python 3.5.
+-   **NEW**: In order to avoid conflicts with future CSS specification changes, non-standard pseudo classes will now
+    start with the `:-soup-` prefix. As a consequence, `:contains()` will now be known as `:-soup-contains()`, though
+    for a time the deprecated form of `:contains()` will still be allowed with a warning that users should migrate over
+    to `:-soup-contains()`.
+-   **NEW**: Added new non-standard pseudo class `:-soup-contains-own()` which operates similar to `:-soup-contains()`
+    except that it only looks at text nodes directly associated with the currently scoped element and not its
+    descendants.
+-   **FIX**: Import `bs4` globally instead of in local functions as it appears there are no adverse affects due to
+    circular imports as `bs4` does not immediately reference `soupsieve` functions and `soupsieve` does not immediately
+    reference `bs4` functions. This should give a performance boost to functions that had previously included `bs4`
+    locally.
 
 ## 2.0.1
 
-- **FIX**: Remove unused code.
+-   **FIX**: Remove unused code.
 
 ## 2.0
 
-- **NEW**: `SelectorSyntaxError` is derived from `Exception` not `SyntaxError`.
-- **NEW**: Remove deprecated `comments` and `icomments` from the API.
-- **NEW**: Drop support for EOL Python versions (Python 2 and Python < 3.5).
-- **FIX**: Corner case with splitting namespace and tag name that that have an escaped `|`.
+-   **NEW**: `SelectorSyntaxError` is derived from `Exception` not `SyntaxError`.
+-   **NEW**: Remove deprecated `comments` and `icomments` from the API.
+-   **NEW**: Drop support for EOL Python versions (Python 2 and Python < 3.5).
+-   **FIX**: Corner case with splitting namespace and tag name that that have an escaped `|`.
 
 ## 1.9.6
 
-!!! note "Last version for Python 2.7"
+/// note | Last version for Python 2.7
+///
 
-- **FIX**: Prune dead code.
-- **FIX**: Corner case with splitting namespace and tag name that that have an escaped `|`.
+-   **FIX**: Prune dead code.
+-   **FIX**: Corner case with splitting namespace and tag name that that have an escaped `|`.
 
 ## 1.9.5
 
-- **FIX**: `:placeholder-shown` should not match if the element has content that overrides the placeholder.
+-   **FIX**: `:placeholder-shown` should not match if the element has content that overrides the placeholder.
 
 ## 1.9.4
 
-- **FIX**: `:checked` rule was too strict with `option` elements. The specification for `:checked` does not require an
-  `option` element to be under a `select` element.
-- **FIX**: Fix level 4 `:lang()` wildcard match handling with singletons. Implicit wildcard matching should not
-  match any singleton. Explicit wildcard matching (`*` in the language range: `*-US`) is allowed to match singletons.
+-   **FIX**: `:checked` rule was too strict with `option` elements. The specification for `:checked` does not require an
+    `option` element to be under a `select` element.
+-   **FIX**: Fix level 4 `:lang()` wildcard match handling with singletons. Implicit wildcard matching should not
+    match any singleton. Explicit wildcard matching (`*` in the language range: `*-US`) is allowed to match singletons.
 
 ## 1.9.3
 
-- **FIX**: `[attr!=value]` pattern was mistakenly using `:not([attr|=value])` logic instead of `:not([attr=value])`.
-- **FIX**: Remove undocumented `_QUIRKS` mode flag. Beautiful Soup was meant to use it to help with transition to Soup
-  Sieve, but never released with it. Help with transition at this point is no longer needed.
+-   **FIX**: `[attr!=value]` pattern was mistakenly using `:not([attr|=value])` logic instead of `:not([attr=value])`.
+-   **FIX**: Remove undocumented `_QUIRKS` mode flag. Beautiful Soup was meant to use it to help with transition to Soup
+    Sieve, but never released with it. Help with transition at this point is no longer needed.
 
 ## 1.9.2
 
-- **FIX**: Shortcut last descendant calculation if possible for performance.
-- **FIX**: Fix issue where `Doctype` strings can be mistaken for a normal text node in some cases.
-- **FIX**: A top level tag is not a `:root` tag if it has sibling text nodes or tag nodes. This is an issue that mostly
-  manifests when using `html.parser` as the parser will allow multiple root nodes.
+-   **FIX**: Shortcut last descendant calculation if possible for performance.
+-   **FIX**: Fix issue where `Doctype` strings can be mistaken for a normal text node in some cases.
+-   **FIX**: A top level tag is not a `:root` tag if it has sibling text nodes or tag nodes. This is an issue that
+    mostly manifests when using `html.parser` as the parser will allow multiple root nodes.
 
 ## 1.9.1
 
-- **FIX**: `:root`, `:contains()`, `:default`, `:indeterminate`, `:lang()`, and `:dir()` will properly account for HTML
-  `iframe` elements in their logic when selecting or matching an element. Their logic will be restricted to the document
-  for which the element under consideration applies.
-- **FIX**: HTML pseudo-classes will check that all key elements checked are in the XHTML namespace (HTML parsers that do
-  not provide namespaces will assume the XHTML namespace).
-- **FIX**: Ensure that all pseudo-class names are case insensitive and allow CSS escapes.
+-   **FIX**: `:root`, `:contains()`, `:default`, `:indeterminate`, `:lang()`, and `:dir()` will properly account for
+    HTML `iframe` elements in their logic when selecting or matching an element. Their logic will be restricted to the
+    document for which the element under consideration applies.
+-   **FIX**: HTML pseudo-classes will check that all key elements checked are in the XHTML namespace (HTML parsers that
+    do not provide namespaces will assume the XHTML namespace).
+-   **FIX**: Ensure that all pseudo-class names are case insensitive and allow CSS escapes.
 
 ## 1.9
 
-- **NEW**: Allow `:contains()` to accept a list of text to search for. (#115)
-- **NEW**: Add new `escape` function for escaping CSS identifiers. (#125)
-- **NEW**: Deprecate `comments` and `icomments` functions in the API to ensure Soup Sieve focuses only on CSS selectors.
-  `comments` and `icomments` will most likely be removed in 2.0. (#130)
-- **NEW**: Add Python 3.8 support. (#133)
-- **FIX**: Don't install test files when installing the `soupsieve` package. (#111)
-- **FIX**: Improve efficiency of `:contains()` comparison.
-- **FIX**: Null characters should translate to the Unicode REPLACEMENT CHARACTER (`U+FFFD`) according to the
-  specification. This applies to CSS escaped NULL characters as well. (#124)
-- **FIX**: Escaped EOF should translate to `U+FFFD` outside of CSS strings. In a string, they should just be ignored,
-  but as there is no case where we could resolve such a string and still have a valid selector, string handling remains
-  the same. (#128)
+-   **NEW**: Allow `:contains()` to accept a list of text to search for. (#115)
+-   **NEW**: Add new `escape` function for escaping CSS identifiers. (#125)
+-   **NEW**: Deprecate `comments` and `icomments` functions in the API to ensure Soup Sieve focuses only on CSS
+    selectors. `comments` and `icomments` will most likely be removed in 2.0. (#130)
+-   **NEW**: Add Python 3.8 support. (#133)
+-   **FIX**: Don't install test files when installing the `soupsieve` package. (#111)
+-   **FIX**: Improve efficiency of `:contains()` comparison.
+-   **FIX**: Null characters should translate to the Unicode REPLACEMENT CHARACTER (`U+FFFD`) according to the
+    specification. This applies to CSS escaped NULL characters as well. (#124)
+-   **FIX**: Escaped EOF should translate to `U+FFFD` outside of CSS strings. In a string, they should just be ignored,
+    but as there is no case where we could resolve such a string and still have a valid selector, string handling
+    remains the same. (#128)
 
 ## 1.8
 
-- **NEW**: Add custom selector support. (#92)(#108)
-- **FIX**: Small tweak to CSS identifier pattern to ensure it matches the CSS specification exactly. Specifically, you
-  can't have an identifier of only `-`. (#107)
-- **FIX**: CSS string patterns should allow escaping newlines to span strings across multiple lines. (#107)
-- **FIX**: Newline regular expression for CSS newlines should treat `\r\n` as a single character, especially in cases
-  such as string escapes: `\\\r\n`. (#107)
-- **FIX**: Allow `--` as a valid identifier or identifier start. (#107)
-- **FIX**: Bad CSS syntax now raises a `SelectorSyntaxError`, which is still currently derived from `SyntaxError`, but
-  will most likely be derived from `Exception` in the future.
+-   **NEW**: Add custom selector support. (#92)(#108)
+-   **FIX**: Small tweak to CSS identifier pattern to ensure it matches the CSS specification exactly. Specifically, you
+    can't have an identifier of only `-`. (#107)
+-   **FIX**: CSS string patterns should allow escaping newlines to span strings across multiple lines. (#107)
+-   **FIX**: Newline regular expression for CSS newlines should treat `\r\n` as a single character, especially in cases
+    such as string escapes: `\\\r\n`. (#107)
+-   **FIX**: Allow `--` as a valid identifier or identifier start. (#107)
+-   **FIX**: Bad CSS syntax now raises a `SelectorSyntaxError`, which is still currently derived from `SyntaxError`, but
+    will most likely be derived from `Exception` in the future.
 
 ## 1.7.3
 
-- **FIX**: Fix regression with tag names in regards to case sensitivity, and ensure there are tests to prevent breakage
-  in the future.
-- **FIX**: XHTML should always be case sensitive like XML.
+-   **FIX**: Fix regression with tag names in regards to case sensitivity, and ensure there are tests to prevent
+    breakage in the future.
+-   **FIX**: XHTML should always be case sensitive like XML.
 
 ## 1.7.2
 
-- **FIX**: Fix HTML detection `type` selector.
-- **FIX**: Fixes for `:enabled` and `:disabled`.
-- **FIX**: Provide a way for Beautiful Soup to parse selectors in a quirks mode to mimic some of the quirks of the old
-  select method prior to Soup Sieve, but with warnings. This is to help old scripts to not break during the transitional
-  period with newest Beautiful Soup. In the future, these quirks will raise an exception as Soup Sieve requires
-  selectors to follow the CSS specification.
+-   **FIX**: Fix HTML detection `type` selector.
+-   **FIX**: Fixes for `:enabled` and `:disabled`.
+-   **FIX**: Provide a way for Beautiful Soup to parse selectors in a quirks mode to mimic some of the quirks of the old
+    select method prior to Soup Sieve, but with warnings. This is to help old scripts to not break during the
+    transitional period with newest Beautiful Soup. In the future, these quirks will raise an exception as Soup Sieve
+    requires selectors to follow the CSS specification.
 
 ## 1.7.1
 
-- **FIX**: Fix issue with `:has()` selector where a leading combinator can only be provided in the first selector in a
-  relative selector list.
+-   **FIX**: Fix issue with `:has()` selector where a leading combinator can only be provided in the first selector in a
+    relative selector list.
 
 ## 1.7
 
-- **NEW**: Add support for `:in-range` and `:out-of-range` selectors. (#60)
-- **NEW**: Add support for `:defined` selector. (#76)
-- **FIX**: Fix pickling issue when compiled selector contains a `NullSelector` object. (#70)
-- **FIX**: Better exception messages in the CSS selector parser and fix a position reporting issue that can occur in
-  some exceptions. (#72, #73)
-- **FIX**: Don't compare prefixes when evaluating attribute namespaces, compare the actual namespace. (#75)
-- **FIX**: Split whitespace attribute lists by all whitespace characters, not just space.
-- **FIX**: `:nth-*` patterns were converting numbers to base 16 when they should have been converting to base 10.
+-   **NEW**: Add support for `:in-range` and `:out-of-range` selectors. (#60)
+-   **NEW**: Add support for `:defined` selector. (#76)
+-   **FIX**: Fix pickling issue when compiled selector contains a `NullSelector` object. (#70)
+-   **FIX**: Better exception messages in the CSS selector parser and fix a position reporting issue that can occur in
+    some exceptions. (#72, #73)
+-   **FIX**: Don't compare prefixes when evaluating attribute namespaces, compare the actual namespace. (#75)
+-   **FIX**: Split whitespace attribute lists by all whitespace characters, not just space.
+-   **FIX**: `:nth-*` patterns were converting numbers to base 16 when they should have been converting to base 10.
 
 ## 1.6.2
 
-- **FIX**: Fix pattern compile issues on Python < 2.7.4.
-- **FIX**: Don't use `\d` in Unicode `Re` patterns as they will contain characters outside the range of `[0-9]`.
+-   **FIX**: Fix pattern compile issues on Python < 2.7.4.
+-   **FIX**: Don't use `\d` in Unicode `Re` patterns as they will contain characters outside the range of `[0-9]`.
 
 ## 1.6.1
 
-- **FIX**: Fix warning about not importing `Mapping` from `collections.abc`.
+-   **FIX**: Fix warning about not importing `Mapping` from `collections.abc`.
 
 ## 1.6
 
-- **NEW**: Add `closest` method to the API that matches closest ancestor.
-- **FIX**: Add missing `select_one` reference to module's `__all__`.
+-   **NEW**: Add `closest` method to the API that matches closest ancestor.
+-   **FIX**: Add missing `select_one` reference to module's `__all__`.
 
 ## 1.5
 
-- **NEW**: Add `select_one` method like Beautiful Soup has.
-- **NEW**: Add `:dir()` selector (HTML only).
-- **FIX**: Fix issues when handling HTML fragments (elements without a `BeautifulSoup` object as a parent).
-- **FIX**: Fix internal `nth` range check.
+-   **NEW**: Add `select_one` method like Beautiful Soup has.
+-   **NEW**: Add `:dir()` selector (HTML only).
+-   **FIX**: Fix issues when handling HTML fragments (elements without a `BeautifulSoup` object as a parent).
+-   **FIX**: Fix internal `nth` range check.
 
 ## 1.4.0
 
-- **NEW**: Throw `NotImplementedError` for at-rules: `@page`, etc.
-- **NEW**: Match nothing for `:host`, `:host()`, and `:host-context()`.
-- **NEW**: Add support for `:read-write` and `:read-only`.
-- **NEW**: Selector patterns can be annotated with CSS comments.
-- **FIX**: `\r`, `\n`, and `\f` cannot be escaped with `\` in CSS. You must use Unicode escapes.
+-   **NEW**: Throw `NotImplementedError` for at-rules: `@page`, etc.
+-   **NEW**: Match nothing for `:host`, `:host()`, and `:host-context()`.
+-   **NEW**: Add support for `:read-write` and `:read-only`.
+-   **NEW**: Selector patterns can be annotated with CSS comments.
+-   **FIX**: `\r`, `\n`, and `\f` cannot be escaped with `\` in CSS. You must use Unicode escapes.
 
 ## 1.3.1
 
-- **FIX**: Fix issue with undefined namespaces.
+-   **FIX**: Fix issue with undefined namespaces.
 
 ## 1.3
 
-- **NEW**: Add support for `:scope`.
-- **NEW**: `:user-invalid`, `:playing`, `:paused`, and `:local-link` will not cause a failure, but all will match
-  nothing as their use cases are not possible in an environment outside a web browser.
-- **FIX**: Fix `[attr~=value]` handling of whitespace. According to the spec, if the value contains whitespace, or is an
-  empty string, it should not match anything.
-- **FIX**: Precompile internal patterns for pseudo-classes to prevent having to parse them again.
+-   **NEW**: Add support for `:scope`.
+-   **NEW**: `:user-invalid`, `:playing`, `:paused`, and `:local-link` will not cause a failure, but all will match
+    nothing as their use cases are not possible in an environment outside a web browser.
+-   **FIX**: Fix `[attr~=value]` handling of whitespace. According to the spec, if the value contains whitespace, or is
+    an empty string, it should not match anything.
+-   **FIX**: Precompile internal patterns for pseudo-classes to prevent having to parse them again.
 
 ## 1.2.1
 
-- **FIX**: More descriptive exceptions. Exceptions will also now mention position in the pattern that is problematic.
-- **FIX**: `filter` ignores `NavigableString` objects in normal iterables and `Tag` iterables. Basically, it filters all
-  Beautiful Soup document parts regardless of iterable type where as it used to only filter out a `NavigableString` in a
-  `Tag` object. This is viewed as fixing an inconsistency.
-- **FIX**: `DEBUG` flag has been added to help with debugging CSS selector parsing. This is mainly for development.
-- **FIX**: If forced to search for language in `meta` tag, and no language is found, cache that there is no language in
-  the `meta` tag to prevent searching again during the current select.
-- **FIX**: If a non `BeautifulSoup`/`Tag` object is given to the API to compare against, raise a `TypeError`.
+-   **FIX**: More descriptive exceptions. Exceptions will also now mention position in the pattern that is problematic.
+-   **FIX**: `filter` ignores `NavigableString` objects in normal iterables and `Tag` iterables. Basically, it filters
+    all Beautiful Soup document parts regardless of iterable type where as it used to only filter out a
+    `NavigableString` in a `Tag` object. This is viewed as fixing an inconsistency.
+-   **FIX**: `DEBUG` flag has been added to help with debugging CSS selector parsing. This is mainly for development.
+-   **FIX**: If forced to search for language in `meta` tag, and no language is found, cache that there is no language
+    in the `meta` tag to prevent searching again during the current select.
+-   **FIX**: If a non `BeautifulSoup`/`Tag` object is given to the API to compare against, raise a `TypeError`.
 
 ## 1.2
 
-- **NEW**: Add Python 2.7 support.
-- **NEW**: Remove old pre 1.0 deprecations.
+-   **NEW**: Add Python 2.7 support.
+-   **NEW**: Remove old pre 1.0 deprecations.
 
 ## 1.1
 
-- **NEW**: Adds support for `[attr!=value]` which is equivalent to `:not([attr=value])`.
-- **NEW**: Add support for `:active`, `:focus`, `:hover`, `:visited`, `:target`, `:focus-within`, `:focus-visible`,
-  `:target-within`, `:current()`/`:current`, `:past`, and `:future`, but they will never match as these states don't
-  exist in the Soup Sieve environment.
-- **NEW**: Add support for `:checked`, `:enabled`, `:disabled`, `:required`, `:optional`, `:default`, and
-  `:placeholder-shown` which will only match in HTML documents as these concepts are not defined in XML.
-- **NEW**: Add support for `:link` and `:any-link`, both of which will target all `<a>`, `<area>`, and `<link>` elements
-  with an `href` attribute as all links will be treated as unvisited in Soup Sieve.
-- **NEW**: Add support for `:lang()` (CSS4) which works in XML and HTML.
-- **NEW**: Users must install Beautiful Soup themselves. This requirement is removed in the hopes that Beautiful Soup
-  may use this in the future.
-- **FIX**: Attributes in the form `prefix:attr` can be matched with the form `[prefix\:attr]` without specifying a
-  namespaces if desired.
-- **FIX**: Fix exception when `[type]` is used (with no value).
+-   **NEW**: Adds support for `[attr!=value]` which is equivalent to `:not([attr=value])`.
+-   **NEW**: Add support for `:active`, `:focus`, `:hover`, `:visited`, `:target`, `:focus-within`, `:focus-visible`,
+    `:target-within`, `:current()`/`:current`, `:past`, and `:future`, but they will never match as these states don't
+    exist in the Soup Sieve environment.
+-   **NEW**: Add support for `:checked`, `:enabled`, `:disabled`, `:required`, `:optional`, `:default`, and
+    `:placeholder-shown` which will only match in HTML documents as these concepts are not defined in XML.
+-   **NEW**: Add support for `:link` and `:any-link`, both of which will target all `<a>`, `<area>`, and `<link>`
+    elements with an `href` attribute as all links will be treated as unvisited in Soup Sieve.
+-   **NEW**: Add support for `:lang()` (CSS4) which works in XML and HTML.
+-   **NEW**: Users must install Beautiful Soup themselves. This requirement is removed in the hopes that Beautiful Soup
+    may use this in the future.
+-   **FIX**: Attributes in the form `prefix:attr` can be matched with the form `[prefix\:attr]` without specifying a
+    namespaces if desired.
+-   **FIX**: Fix exception when `[type]` is used (with no value).
 
 ## 1.0.2
 
-- **FIX**: Use proper CSS identifier patterns for tag names, classes, ids, etc. Things like `#3` or `#-3` should not
-  match and should require `#\33` or `#-\33`.
-- **FIX**: Do not raise `NotImplementedError` for supported pseudo classes/elements with bad syntax, instead raise
-  `SyntaxError`.
+-   **FIX**: Use proper CSS identifier patterns for tag names, classes, ids, etc. Things like `#3` or `#-3` should not
+    match and should require `#\33` or `#-\33`.
+-   **FIX**: Do not raise `NotImplementedError` for supported pseudo classes/elements with bad syntax, instead raise
+    `SyntaxError`.
 
 ## 1.0.1
 
-- **FIX**: When giving a tag to `select`, it should only return the children of that tag, never the tag itself.
-- **FIX**: For informational purposes, raise a `NotImplementedError` when an unsupported pseudo class is used.
+-   **FIX**: When giving a tag to `select`, it should only return the children of that tag, never the tag itself.
+-   **FIX**: For informational purposes, raise a `NotImplementedError` when an unsupported pseudo class is used.
 
 ## 1.0
 
-- **NEW**: Official 1.0.0 release.
+-   **NEW**: Official 1.0.0 release.
 
 ## 1.0.0b2
 
-- **NEW**: Drop document flags. Document type can be detected from the Beautiful Soup object directly.
-- **FIX**: CSS selectors should be evaluated with CSS whitespace rules.
-- **FIX**: Processing instructions, CDATA, and declarations should all be ignored in `:contains` and child
-  considerations for `:empty`.
-- **FIX**: In Beautiful Soup, the document itself is the first tag. Do not match the "document" tag by returning false
-  for any tag that doesn't have a parent.
+-   **NEW**: Drop document flags. Document type can be detected from the Beautiful Soup object directly.
+-   **FIX**: CSS selectors should be evaluated with CSS whitespace rules.
+-   **FIX**: Processing instructions, CDATA, and declarations should all be ignored in `:contains` and child
+    considerations for `:empty`.
+-   **FIX**: In Beautiful Soup, the document itself is the first tag. Do not match the "document" tag by returning false
+    for any tag that doesn't have a parent.
 
 ## 1.0.0b1
 
-- **NEW**: Add support for non-standard `:contains()` selector.
-- **FIX**: Compare pseudo class names case insensitively when matching unexpected cases.
-- **FIX**: Don't allow attribute case flags when no attribute value is defined.
+-   **NEW**: Add support for non-standard `:contains()` selector.
+-   **FIX**: Compare pseudo class names case insensitively when matching unexpected cases.
+-   **FIX**: Don't allow attribute case flags when no attribute value is defined.
 
 ## 0.6
 
-- **NEW**: `mode` attribute is now called `flags` to allow for other options in the future.
-- **FIX**: More corner cases for `nth` selectors.
+-   **NEW**: `mode` attribute is now called `flags` to allow for other options in the future.
+-   **FIX**: More corner cases for `nth` selectors.
 
 ## 0.5.3
 
-- **FIX**: Previously, all pseudo classes' selector lists were evaluated as one big group, but now each pseudo classes'
-  selector lists are evaluated separately.
-- **FIX**: CSS selector tokens are not case sensitive.
+-   **FIX**: Previously, all pseudo classes' selector lists were evaluated as one big group, but now each pseudo class's
+    selector lists are evaluated separately.
+-   **FIX**: CSS selector tokens are not case sensitive.
 
 ## 0.5.2
 
-- **FIX**: Add missing `s` flag to attribute selector for forced case sensitivity of attribute values.
-- **FIX**: Relax attribute pattern matching to allow non-essential whitespace.
-- **FIX**: Attribute selector flags themselves are not case sensitive.
-- **FIX**: `type` attribute in HTML is handled special. While all other attributes values are case sensitive, `type` in
-  HTML is usually treated special and is insensitive. In XML, this is not the case.
+-   **FIX**: Add missing `s` flag to attribute selector for forced case sensitivity of attribute values.
+-   **FIX**: Relax attribute pattern matching to allow non-essential whitespace.
+-   **FIX**: Attribute selector flags themselves are not case sensitive.
+-   **FIX**: `type` attribute in HTML is handled special. While all other attributes values are case sensitive, `type`
+    in HTML is usually treated special and is insensitive. In XML, this is not the case.
 
 ## 0.5.1
 
-- **FIX**: Fix namespace check for `:nth-of-type`.
+-   **FIX**: Fix namespace check for `:nth-of-type`.
 
 ## 0.5
 
-- **NEW**: Deprecate `commentsiter` and `selectiter` in favor of `icomments` and `iselect`. Expect removal in version
-1.0.
+-   **NEW**: Deprecate `commentsiter` and `selectiter` in favor of `icomments` and `iselect`. Expect removal in version
+    1.0.
 
 ## 0.4
 
-- **NEW**: Initial prerelease.
+-   **NEW**: Initial prerelease.
diff --git a/docs/src/markdown/about/contributing.md b/docs/src/markdown/about/contributing.md
index 3ceaf3c..f912bc8 100644
--- a/docs/src/markdown/about/contributing.md
+++ b/docs/src/markdown/about/contributing.md
@@ -10,23 +10,23 @@ any tier you feel comfortable with. No amount is too little. We also accept one
 
 ## Bug Reports
 
-1. Please **read the documentation** and **search the issue tracker** to try and find the answer to your question
-**before** posting an issue.
+1.  Please **read the documentation** and **search the issue tracker** to try and find the answer to your question
+    **before** posting an issue.
 
-2. When creating an issue on the repository, please provide as much information as possible:
+2.  When creating an issue on the repository, please provide as much information as possible:
 
-    - Version being used.
-    - Operating system.
-    - Version of Python.
-    - Errors in console.
-    - Detailed description of the problem.
-    - Examples for reproducing the error.  You can post pictures, but if specific text or code is required to reproduce
-    the issue, please provide the text in a plain text format for easy copy/paste.
+    -   Version being used.
+    -   Operating system.
+    -   Version of Python.
+    -   Errors in console.
+    -   Detailed description of the problem.
+    -   Examples for reproducing the error.  You can post pictures, but if specific text or code is required to
+        reproduce the issue, please provide the text in a plain text format for easy copy/paste.
 
     The more info provided the greater the chance someone will take the time to answer, implement, or fix the issue.
 
-3. Be prepared to answer questions and provide additional information if required.  Issues in which the creator refuses
-to respond to follow up questions will be marked as stale and closed.
+3.  Be prepared to answer questions and provide additional information if required.  Issues in which the creator refuses
+    to respond to follow up questions will be marked as stale and closed.
 
 ## Reviewing Code
 
diff --git a/docs/src/markdown/about/development.md b/docs/src/markdown/about/development.md
index b7f5777..49d9331 100644
--- a/docs/src/markdown/about/development.md
+++ b/docs/src/markdown/about/development.md
@@ -29,11 +29,11 @@ When writing code, the code should roughly conform to PEP8 and PEP257 suggestion
 linter (with some additional plugins) to ensure code conforms (give or take some of the rules).  When in doubt, follow
 the formatting hints of existing code when adding files or modifying existing files.  Listed below are the modules used:
 
-- @gitlab:pycqa/flake8
-- @gitlab:pycqa/flake8-docstrings
-- @gitlab:pycqa/pep8-naming
-- @ebeweber/flake8-mutable
-- @gforcada/flake8-builtins
+-   @gitlab:pycqa/flake8
+-   @gitlab:pycqa/flake8-docstrings
+-   @gitlab:pycqa/pep8-naming
+-   @ebeweber/flake8-mutable
+-   @gforcada/flake8-builtins
 
 Usually this can be automated with Tox (assuming it is installed): `tox -e lint`.
 
@@ -42,10 +42,10 @@ Usually this can be automated with Tox (assuming it is installed): `tox -e lint`
 Documents are in Markdown (with with some additional syntax provided by extensions) and are converted to HTML via Python
 Markdown. If you would like to build and preview the documentation, you must have these packages installed:
 
-- @Python-Markdown/markdown: the Markdown parser.
-- @mkdocs/mkdocs: the document site generator.
-- @squidfunk/mkdocs-material: a material theme for MkDocs.
-- @facelessuser/pymdown-extensions: this Python Markdown extension bundle.
+-   @Python-Markdown/markdown: the Markdown parser.
+-   @mkdocs/mkdocs: the document site generator.
+-   @squidfunk/mkdocs-material: a material theme for MkDocs.
+-   @facelessuser/pymdown-extensions: this Python Markdown extension bundle.
 
 It is advised that you just install document dependencies with the following as the above list may not include all
 document plugins:
diff --git a/docs/src/markdown/api.md b/docs/src/markdown/api.md
index edcbac6..42299ee 100644
--- a/docs/src/markdown/api.md
+++ b/docs/src/markdown/api.md
@@ -11,25 +11,26 @@ When detecting XHTML, Soup Sieve simply looks to see if the root element of an X
 and does not currently look at the `doctype`. If in the future there is a need for stricter XHTML detection, this may
 change.
 
-- HTML document types (HTML, HTML5) will have their tag names and attribute names treated without case
-sensitivity, like most browsers do.
+-   HTML document types (HTML, HTML5) will have their tag names and attribute names treated without case
+    sensitivity, like most browsers do.
 
-- XML document types (including XHTML) will have their tag names and attribute names treated with case sensitivity.
+-   XML document types (including XHTML) will have their tag names and attribute names treated with case sensitivity.
 
-- HTML5, XHTML and XML documents will have namespaces evaluated per the document's support (provided via the
-parser). Some additional configuration is required when using namespaces, see [Namespace](#namespaces) for more
-information.
+-   HTML5, XHTML and XML documents will have namespaces evaluated per the document's support (provided via the
+    parser). Some additional configuration is required when using namespaces, see [Namespace](#namespaces) for more
+    information.
 
-    !!! tip "Getting Proper Namespaces"
-        The `html5lib` parser provides proper namespaces for HTML5, but `lxml`'s HTML parser will not. If you need
-        namespace support for HTML5, consider using `html5lib`.
+    /// tip | Getting Proper Namespaces
+    The `html5lib` parser provides proper namespaces for HTML5, but `lxml`'s HTML parser will not. If you need
+    namespace support for HTML5, consider using `html5lib`.
 
-        For XML, the `lxml-xml` parser (`xml` for short) will provide proper namespaces. It is generally suggested that
-        `lxml-xml` is used to parse XHTML documents to take advantage of namespaces.
+    For XML, the `lxml-xml` parser (`xml` for short) will provide proper namespaces. It is generally suggested that
+    `lxml-xml` is used to parse XHTML documents to take advantage of namespaces.
+    ///
 
-- While attribute values are generally treated as case sensitive, HTML5 and HTML treat the `type` attribute
-special. The `type` attribute's value is always case insensitive. This is generally how most browsers treat `type`. If
-you need `type` to be sensitive, you can use the `s` flag: `#!css [type="submit" s]`.
+-   While attribute values are generally treated as case sensitive, HTML5 and HTML treat the `type` attribute
+    special. The `type` attribute's value is always case insensitive. This is generally how most browsers treat `type`.
+    If you need `type` to be sensitive, you can use the `s` flag: `#!css [type="submit" s]`.
 
 While Soup Sieve access is exposed through Beautiful Soup's API, Soup Sieve's API can always be imported and accessed
 directly for more controlled tag selection if needed.
@@ -180,8 +181,9 @@ would normally cause an identifier to be invalid.
 '�'
 ```
 
-!!! new "New in 1.9.0"
-    `escape` is a new API function added in 1.9.0.
+/// new | New in 1.9.0
+`escape` is a new API function added in 1.9.0.
+///
 
 ## `soupsieve.compile()`
 
diff --git a/docs/src/markdown/index.md b/docs/src/markdown/index.md
index 30d8c91..c18b4b4 100644
--- a/docs/src/markdown/index.md
+++ b/docs/src/markdown/index.md
@@ -14,17 +14,17 @@ Soup Sieve has implemented most of the CSS selectors up through the latest CSS d
 number that don't make sense in a non-browser environment. Selectors that cannot provide meaningful functionality simply
 do not match anything. Some of the supported selectors are:
 
-- `#!css .classes`
-- `#!css #ids`
-- `#!css [attributes=value]`
-- `#!css parent child`
-- `#!css parent > child`
-- `#!css sibling ~ sibling`
-- `#!css sibling + sibling`
-- `#!css :not(element.class, element2.class)`
-- `#!css :is(element.class, element2.class)`
-- `#!css parent:has(> child)`
-- and [many more](./selectors/index.md)
+-   `#!css .classes`
+-   `#!css #ids`
+-   `#!css [attributes=value]`
+-   `#!css parent child`
+-   `#!css parent > child`
+-   `#!css sibling ~ sibling`
+-   `#!css sibling + sibling`
+-   `#!css :not(element.class, element2.class)`
+-   `#!css :is(element.class, element2.class)`
+-   `#!css parent:has(> child)`
+-   and [many more](./selectors/index.md)
 
 ## Installation
 
diff --git a/docs/src/markdown/selectors/basic.md b/docs/src/markdown/selectors/basic.md
index 16e2c86..87f83ce 100644
--- a/docs/src/markdown/selectors/basic.md
+++ b/docs/src/markdown/selectors/basic.md
@@ -23,457 +23,513 @@ If a default namespace is defined in the [namespace dictionary](../api.md#namesp
 [namespace](#namespace-selectors) is explicitly defined, it will be assumed that the element must be in the default
 namespace.
 
-=== "Syntax"
+/// tab | Syntax
+```css
+element
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...   <div>Here is some text.</div>
+...   <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('div'))
+[<div>Here is some text.</div>, <div>Here is some more text.</div>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
+///
+
+## Universal Selectors
+
+The Universal selector (`*`) matches elements of any type.
+
+/// tab | Syntax
+```css
+*
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...    <p>Here is some text.</p>
+...    <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('*'))
+[<html><head></head>
+<body>
+   <div>Here is some text.</div>
+   <div>Here is some more text.</div>
+
+
+</body></html>, <head></head>, <body>
+   <div>Here is some text.</div>
+   <div>Here is some more text.</div>
+
+
+</body>, <div>Here is some text.</div>, <div>Here is some more text.</div>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
+///
+
+## ID Selectors
+
+The ID selector matches an element based on its `id` attribute. The ID must match exactly.
+
+/// tab | Syntax
+```css
+#id
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...    <div id="some-id">Here is some text.</div>
+...    <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('#some-id'))
+[<div id="some-id">Here is some text.</div>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
+///
+
+/// note | XML Support
+While the use of the `id` attribute (in the context of CSS) is a very HTML centric idea, it is supported for XML as
+well because Beautiful Soup supported it before Soup Sieve's existence.
+///
+
+## Class Selectors
+
+The class selector matches an element based on the values contained in the `class` attribute. The `class` attribute is
+treated as a whitespace separated list, where each item is a **class**.
+
+/// tab | Syntax
+```css
+.class
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...    <div class="some-class">Here is some text.</div>
+...    <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('.some-class'))
+[<div class="some-class">Here is some text.</div>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
+///
+
+/// note | XML Support
+While the use of the `class` attribute (in the context of CSS) is a very HTML centric idea, it is supported for XML
+as well because Beautiful Soup supported it before Soup Sieve's existence.
+///
+
+## Attribute Selectors
+
+The attribute selector matches an element based on its attributes. When specifying a value of an attribute, if it
+contains whitespace or special characters, you should quote them with either single or double quotes.
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+///
+
+/// define |
+`[attribute]`
+
+-   Represents elements with an attribute named **attribute**.
+
+    //// tab | Syntax
     ```css
-    element
+    [attr]
     ```
+    ////
 
-=== "Usage"
+    //// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ...   <div>Here is some text.</div>
-    ...   <div>Here is some more text.</div>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('div'))
-    [<div>Here is some text.</div>, <div>Here is some more text.</div>]
+    >>> print(soup.select('[href]'))
+    [<a href="#internal">Internal link</a>, <a href="http://example.com">Example link</a>, <a href="#InSensitive">Insensitive internal link</a>, <a href="http://example.org">Example org link</a>]
     ```
+    ////
+///
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
-
-## Universal Selectors
+/// define
+`[attribute=value]`
 
-The Universal selector (`*`) matches elements of any type.
+-   Represents elements with an attribute named **attribute** that also has a value of **value**.
 
-=== "Syntax"
+    //// tab | Syntax
     ```css
-    *
+    [attr=value]
+    [attr="value"]
     ```
+    ////
 
-=== "Usage"
+    //// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ...    <p>Here is some text.</p>
-    ...    <div>Here is some more text.</div>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('*'))
-    [<html><head></head>
-    <body>
-       <div>Here is some text.</div>
-       <div>Here is some more text.</div>
-
+    >>> print(soup.select('[href="#internal"]'))
+    [<a href="#internal">Internal link</a>]
+    ```
+    ////
+///
 
-    </body></html>, <head></head>, <body>
-       <div>Here is some text.</div>
-       <div>Here is some more text.</div>
+/// define
+`[attribute~=value]`
 
+-   Represents elements with an attribute named **attribute** whose value is a space separated list which contains
+    **value**.
 
-    </body>, <div>Here is some text.</div>, <div>Here is some more text.</div>]
+    //// tab | Syntax
+    ```css
+    [attr~=value]
+    [attr~="value"]
     ```
+    ////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal" class="class1 class2 class3">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('[class~=class2]'))
+    [<a class="class1 class2 class3" href="#internal">Internal link</a>]
+    ```
+    ////
+///
 
-## ID Selectors
+/// define
+`[attribute|=value]`
 
-The ID selector matches an element based on its `id` attribute. The ID must match exactly.
+-   Represents elements with an attribute named **attribute** whose value is a dash separated list that starts with
+    **value**.
 
-=== "Syntax"
+    //// tab | Syntax
     ```css
-    #id
+    [attr|=value]
+    [attr|="value"]
     ```
+    ////
 
-=== "Usage"
+    //// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ...    <div id="some-id">Here is some text.</div>
-    ...    <div>Here is some more text.</div>
+    ... <div lang="en">Some text</div>
+    ... <div lang="en-US">Some more text</div>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('#some-id'))
-    [<div id="some-id">Here is some text.</div>]
+    >>> print(soup.select('div[lang|="en"]'))
+    [<div lang="en">Some text</div>, <div lang="en-US">Some more text</div>]
     ```
+    ////
+///
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
-
-!!! note "XML Support"
-    While the use of the `id` attribute (in the context of CSS) is a very HTML centric idea, it is supported for XML as
-    well because Beautiful Soup supported it before Soup Sieve's existence.
-
-## Class Selectors
+/// define
+`[attribute^=value]`
 
-The class selector matches an element based on the values contained in the `class` attribute. The `class` attribute is
-treated as a whitespace separated list, where each item is a **class**.
+-   Represents elements with an attribute named **attribute** whose value starts with **value**.
 
-=== "Syntax"
+    //// tab | Syntax
     ```css
-    .class
+    [attr^=value]
+    [attr^="value"]
     ```
+    ////
 
-=== "Usage"
+    //// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ...    <div class="some-class">Here is some text.</div>
-    ...    <div>Here is some more text.</div>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('.some-class'))
-    [<div class="some-class">Here is some text.</div>]
+    >>> print(soup.select('[href^=http]'))
+    [<a href="http://example.com">Example link</a>, <a href="http://example.org">Example org link</a>]
     ```
+    ////
+///
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
-
-!!! note "XML Support"
-    While the use of the `class` attribute (in the context of CSS) is a very HTML centric idea, it is supported for XML
-    as well because Beautiful Soup supported it before Soup Sieve's existence.
+/// define
 
-## Attribute Selectors
-
-The attribute selector matches an element based on its attributes. When specifying a value of an attribute, if it
-contains whitespace or special characters, you should quote them with either single or double quotes.
+`[attribute$=value]`
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+-   Represents elements with an attribute named **attribute** whose value ends with **value**.
 
-`[attribute]`
-: 
-    Represents elements with an attribute named **attribute**.
-
-    === "Syntax"
-        ```css
-        [attr]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href]'))
-        [<a href="#internal">Internal link</a>, <a href="http://example.com">Example link</a>, <a href="#InSensitive">Insensitive internal link</a>, <a href="http://example.org">Example org link</a>]
-        ```
+    //// tab | Syntax
+    ```css
+    [attr$=value]
+    [attr$="value"]
+    ```
+    ////
 
-`[attribute=value]`
-: 
-    Represents elements with an attribute named **attribute** that also has a value of **value**.
-
-    === "Syntax"
-        ```css
-        [attr=value]
-        [attr="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href="#internal"]'))
-        [<a href="#internal">Internal link</a>]
-        ```
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('[href$=org]'))
+    [<a href="http://example.org">Example org link</a>]
+    ```
+    ////
+///
 
-`[attribute~=value]`
-: 
-    Represents elements with an attribute named **attribute** whose value is a space separated list which contains
-    **value**.
+/// define
+`[attribute*=value]`
 
-    === "Syntax"
-        ```css
-        [attr~=value]
-        [attr~="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal" class="class1 class2 class3">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[class~=class2]'))
-        [<a class="class1 class2 class3" href="#internal">Internal link</a>]
-        ```
+-   Represents elements with an attribute named **attribute** whose value containing the substring **value**.
 
-`[attribute|=value]`
-: 
-    Represents elements with an attribute named **attribute** whose value is a dash separated list that starts with
-    **value**.
+    //// tab | Syntax
+    ```css
+    [attr*=value]
+    [attr*="value"]
+    ```
+    ////
 
-    === "Syntax"
-        ```css
-        [attr|=value]
-        [attr|="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <div lang="en">Some text</div>
-        ... <div lang="en-US">Some more text</div>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('div[lang|="en"]'))
-        [<div lang="en">Some text</div>, <div lang="en-US">Some more text</div>]
-        ```
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('[href*="example"]'))
+    [<a href="http://example.com">Example link</a>, <a href="http://example.org">Example org link</a>]
+    ```
+    ////
+///
 
-`[attribute^=value]`
-: 
-    Represents elements with an attribute named **attribute** whose value starts with **value**.
-
-    === "Syntax"
-        ```css
-        [attr^=value]
-        [attr^="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href^=http]'))
-        [<a href="http://example.com">Example link</a>, <a href="http://example.org">Example org link</a>]
-        ```
+/// define
+`[attribute!=value]`:material-star:{: title="Custom" data-md-color-primary="green" .icon}
 
-`[attribute$=value]`
-: 
-    Represents elements with an attribute named **attribute** whose value ends with **value**.
-
-    === "Syntax"
-        ```css
-        [attr$=value]
-        [attr$="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href$=org]'))
-        [<a href="http://example.org">Example org link</a>]
-        ```
+-   Equivalent to `#!css :not([attribute=value])`.
 
-`[attribute*=value]`
-: 
-    Represents elements with an attribute named **attribute** whose value containing the substring **value**.
-
-    === "Syntax"
-        ```css
-        [attr*=value]
-        [attr*="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href*="example"]'))
-        [<a href="http://example.com">Example link</a>, <a href="http://example.org">Example org link</a>]
-        ```
+    //// tab | Syntax
+    ```css
+    [attr!=value]
+    [attr!="value"]
+    ```
+    ////
 
-`[attribute!=value]`:material-star:{: title="Custom" data-md-color-primary="green" .icon}
-: 
-    Equivalent to `#!css :not([attribute=value])`.
-
-    === "Syntax"
-        ```css
-        [attr!=value]
-        [attr!="value"]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('a[href!="#internal"]'))
-        [<a href="http://example.com">Example link</a>, <a href="#InSensitive">Insensitive internal link</a>, <a href="http://example.org">Example org link</a>]
-        ```
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('a[href!="#internal"]'))
+    [<a href="http://example.com">Example link</a>, <a href="#InSensitive">Insensitive internal link</a>, <a href="http://example.org">Example org link</a>]
+    ```
+    ////
+///
 
+/// define
 `[attribute operator value i]`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
+
+-   Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
     **value** *without* case sensitivity. In general, attribute comparison is insensitive in normal HTML, but not XML.
     `i` is most useful in XML documents.
 
-    === "Syntax"
-        ```css
-        [attr=value i]
-        [attr="value" i]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href="#INTERNAL" i]'))
-        [<a href="#internal">Internal link</a>]
-        ```
+    //// tab | Syntax
+    ```css
+    [attr=value i]
+    [attr="value" i]
+    ```
+    ////
+
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('[href="#INTERNAL" i]'))
+    [<a href="#internal">Internal link</a>]
+    ```
+    ////
+///
 
+/// define
 `[attribute operator value s]` :material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
+
+-   Represents elements with an attribute named **attribute** and whose value, when the **operator** is applied, matches
     **value** *with* case sensitivity.
 
-    === "Syntax"
-        ```css
-        [attr=value s]
-        [attr="value" s]
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <ul>
-        ...   <li><a href="#internal">Internal link</a></li>
-        ...   <li><a href="http://example.com">Example link</a></li>
-        ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
-        ...   <li><a href="http://example.org">Example org link</a></li>
-        ... </ul>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('[href="#INTERNAL" s]'))
-        []
-        >>> print(soup.select('[href="#internal" s]'))
-        [<a href="#internal">Internal link</a>]
-        ```
+    //// tab | Syntax
+    ```css
+    [attr=value s]
+    [attr="value" s]
+    ```
+    ////
+
+    //// tab | Usage
+    ```pycon3
+    >>> from bs4 import BeautifulSoup as bs
+    >>> html = """
+    ... <html>
+    ... <head></head>
+    ... <body>
+    ... <ul>
+    ...   <li><a href="#internal">Internal link</a></li>
+    ...   <li><a href="http://example.com">Example link</a></li>
+    ...   <li><a href="#InSensitive">Insensitive internal link</a></li>
+    ...   <li><a href="http://example.org">Example org link</a></li>
+    ... </ul>
+    ... </body>
+    ... </html>
+    ... """
+    >>> soup = bs(html, 'html5lib')
+    >>> print(soup.select('[href="#INTERNAL" s]'))
+    []
+    >>> print(soup.select('[href="#internal" s]'))
+    [<a href="#internal">Internal link</a>]
+    ```
+    ////
+///
 
 ## Namespace Selectors
 
@@ -499,46 +555,48 @@ but attributes usually do not have a namespace unless one is explicitly defined
 Namespaces can be used with attribute selectors as well except that when `[|attribute`] is used, it is equivalent to
 `[attribute]`.
 
-=== "Syntax"
-    ```css
-    ns|element
-    ns|*
-    *|*
-    *|element
-    |element
-    [ns|attr]
-    [*|attr]
-    [|attr]
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <h1>SVG Example</h1>
-    ... <p><a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a></p>
-    ... 
-    ... <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
-    ...   <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>
-    ... </svg>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('svg|a', namespaces={'svg': 'http://www.w3.org/2000/svg'}))
-    [<a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]  
-    >>> print(soup.select('a', namespaces={'svg': 'http://www.w3.org/2000/svg'}))
-    [<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>, <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]
-    >>> print(soup.select('a', namespaces={'': 'http://www.w3.org/1999/xhtml', 'svg': 'http://www.w3.org/2000/svg'}))
-    [<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>]
-    >>> print(soup.select('[xlink|href]', namespaces={'xlink': 'http://www.w3.org/1999/xlink'}))
-    [<a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]
-    >>> print(soup.select('[|href]', namespaces={'xlink': 'http://www.w3.org/1999/xlink'}))
-    [<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>]
-    ```
+/// tab | Syntax
+```css
+ns|element
+ns|*
+*|*
+*|element
+|element
+[ns|attr]
+[*|attr]
+[|attr]
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <h1>SVG Example</h1>
+... <p><a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a></p>
+... 
+... <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
+...   <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>
+... </svg>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('svg|a', namespaces={'svg': 'http://www.w3.org/2000/svg'}))
+[<a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]  
+>>> print(soup.select('a', namespaces={'svg': 'http://www.w3.org/2000/svg'}))
+[<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>, <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]
+>>> print(soup.select('a', namespaces={'': 'http://www.w3.org/1999/xhtml', 'svg': 'http://www.w3.org/2000/svg'}))
+[<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>]
+>>> print(soup.select('[xlink|href]', namespaces={'xlink': 'http://www.w3.org/1999/xlink'}))
+[<a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>]
+>>> print(soup.select('[|href]', namespaces={'xlink': 'http://www.w3.org/1999/xlink'}))
+[<a href="http://facelessuser.github.io/soupsieve/">Soup Sieve Docs</a>]
+```
+///
 
 --8<--
 selector_styles.md
diff --git a/docs/src/markdown/selectors/combinators.md b/docs/src/markdown/selectors/combinators.md
index 17da431..2e29a9a 100644
--- a/docs/src/markdown/selectors/combinators.md
+++ b/docs/src/markdown/selectors/combinators.md
@@ -7,149 +7,163 @@ CSS employs a number of tokens in order to represent lists or to provide relatio
 Selector lists use the comma (`,`) to join multiple selectors in a list. When presented with a selector list, any
 selector in the list that matches an element will return that element.
 
-=== "Syntax"
-    ```css
-    element1, element2
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <h1>Title</h1>
-    ... <p>Paragraph</p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('h1, p'))
-    [<h1>Title</h1>, <p>Paragraph</p>]
-    ```
+/// tab | Syntax
+```css
+element1, element2
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <h1>Title</h1>
+... <p>Paragraph</p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('h1, p'))
+[<h1>Title</h1>, <p>Paragraph</p>]
+```
+///
 
 ## Descendant Combinator
 
 Descendant combinators combine two selectors with whitespace (<code> </code>) in order to signify that the second
 element is matched if it has an ancestor that matches the first element.
 
-=== "Syntax"
-    ```css
-    parent descendant
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <div><p>Paragraph 1</p></div>
-    ... <div><p>Paragraph 2</p></div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('body p'))
-    [<p>Paragraph 1</p>, <p>Paragraph 2</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
+/// tab | Syntax
+```css
+parent descendant
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <div><p>Paragraph 1</p></div>
+... <div><p>Paragraph 2</p></div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('body p'))
+[<p>Paragraph 1</p>, <p>Paragraph 2</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
+///
 
 ## Child combinator
 
 Child combinators combine two selectors with `>` in order to signify that the second element is matched if it has a
 parent that matches the first element.
 
-=== "Syntax"
-    ```css
-    parent > child
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <div><p>Paragraph 1</p></div>
-    ... <div><ul><li><p>Paragraph 2</p></li></ul></div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('div > p'))
-    [<p>Paragraph 1</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
+/// tab | Syntax
+```css
+parent > child
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <div><p>Paragraph 1</p></div>
+... <div><ul><li><p>Paragraph 2</p></li></ul></div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('div > p'))
+[<p>Paragraph 1</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
+///
 
 ## General sibling combinator
 
 General sibling combinators combine two selectors with `~` in order to signify that the second element is matched if it
 has a sibling that precedes it that matches the first element.
 
-=== "Syntax"
-    ```css
-    prevsibling ~ sibling
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <h1>Title</h1>
-    ... <p>Paragraph 1</p>
-    ... <p>Paragraph 2</p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('h1 ~ p'))
-    [<p>Paragraph 1</p>, <p>Paragraph 2</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
+/// tab | Syntax
+```css
+prevsibling ~ sibling
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <h1>Title</h1>
+... <p>Paragraph 1</p>
+... <p>Paragraph 2</p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('h1 ~ p'))
+[<p>Paragraph 1</p>, <p>Paragraph 2</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
+///
 
 ## Adjacent sibling combinator
 
 Adjacent sibling combinators combine two selectors with `+` in order to signify that the second element is matched if it
 has an adjacent sibling that precedes it that matches the first element.
 
-=== "Syntax"
-    ```css
-    prevsibling + nextsibling
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <h1>Title</h1>
-    ... <p>Paragraph 1</p>
-    ... <p>Paragraph 2</p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('h1 ~ p'))
-    [<p>Paragraph 1</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
+/// tab | Syntax
+```css
+prevsibling + nextsibling
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <h1>Title</h1>
+... <p>Paragraph 1</p>
+... <p>Paragraph 2</p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('h1 ~ p'))
+[<p>Paragraph 1</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
+///
 
 --8<--
 selector_styles.md
diff --git a/docs/src/markdown/selectors/index.md b/docs/src/markdown/selectors/index.md
index 18f09db..f573b93 100644
--- a/docs/src/markdown/selectors/index.md
+++ b/docs/src/markdown/selectors/index.md
@@ -67,22 +67,23 @@ cases, we may adopt them as "custom" selectors.
 </tr>
 </table>
 
-!!! tip "Additional Reading"
-    If usage of a selector is not clear in this documentation, you can find more information by reading these
-    specification documents:
+/// tip | Additional Reading
+If usage of a selector is not clear in this documentation, you can find more information by reading these
+specification documents:
 
-    [CSS Level 3 Specification](https://www.w3.org/TR/selectors-3/)
-    : Contains the latest official document outlying official behaviors of CSS selectors.
+[CSS Level 3 Specification](https://www.w3.org/TR/selectors-3/)
+: Contains the latest official document outlying official behaviors of CSS selectors.
 
-    [CSS Level 4 Working Draft](https://www.w3.org/TR/selectors-4/)
-    : Contains the latest published working draft of the CSS level 4 selectors which outlines the experimental new
-    selectors and experimental behavioral changes.
+[CSS Level 4 Working Draft](https://www.w3.org/TR/selectors-4/)
+: Contains the latest published working draft of the CSS level 4 selectors which outlines the experimental new
+selectors and experimental behavioral changes.
 
-    [HTML5](https://www.w3.org/TR/html50/)
-    : The HTML 5.0 specification document. Defines the semantics regarding HTML.
+[HTML5](https://www.w3.org/TR/html50/)
+: The HTML 5.0 specification document. Defines the semantics regarding HTML.
 
-    [HTML Living Standard](https://html.spec.whatwg.org/)
-    : The HTML Living Standard document. Defines semantics regarding HTML.
+[HTML Living Standard](https://html.spec.whatwg.org/)
+: The HTML Living Standard document. Defines semantics regarding HTML.
+///
 
 ## Selector Terminology
 
diff --git a/docs/src/markdown/selectors/pseudo-classes.md b/docs/src/markdown/selectors/pseudo-classes.md
index 17b2238..a62d55b 100644
--- a/docs/src/markdown/selectors/pseudo-classes.md
+++ b/docs/src/markdown/selectors/pseudo-classes.md
@@ -13,128 +13,138 @@ implement as they might not stick around.
 Selects every `#!html <a>`, or `#!html <area>` element that has an `href` attribute, independent of
 whether it has been visited.
 
-=== "Syntax"
-    ```css
-    :any-link
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p>A link to <a href="http://example.com">click</a></p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':any-link'))
-    [<a href="http://example.com">click</a>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
-
-!!! new "New in 2.2"
-    The CSS specification recently updated to not include `#!html <link>` in the definition; therefore, Soup Sieve has
-    removed it as well.
+/// tab | Syntax
+```css
+:any-link
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p>A link to <a href="http://example.com">click</a></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':any-link'))
+[<a href="http://example.com">click</a>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
+///
+
+/// new | New in 2.2
+The CSS specification recently updated to not include `#!html <link>` in the definition; therefore, Soup Sieve has
+removed it as well.
+///
 
 ## `:checked`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:checked}
 
 Selects any `#!html <input type="radio"/>`, `#!html <input type="checkbox"/>`, or `#!html <option>` element (in a
 `#!html <select>` element) that is checked or toggled to an on state.
 
-=== "Syntax"
-    ```css
-    :checked
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... 
-    ... <div>
-    ...   <input type="radio" name="my-input" id="yes" checked>
-    ...   <label for="yes">Yes</label>
-    ... 
-    ...   <input type="radio" name="my-input" id="no">
-    ...   <label for="no">No</label>
-    ... </div>
-    ... 
-    ... <select name="my-select" id="fruit">
-    ...   <option id="1" value="opt1">Apples</option>
-    ...   <option id="2" value="opt2" selected>Grapes</option>
-    ...   <option id="3" value="opt3">Pears</option>
-    ... </select>
-    ... 
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':checked'))
-    [<input checked="" id="yes" name="my-input" type="radio"/>, <option id="2" selected="" value="opt2">Grapes</option>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
+/// tab | Syntax
+```css
+:checked
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... 
+... <div>
+...   <input type="radio" name="my-input" id="yes" checked>
+...   <label for="yes">Yes</label>
+... 
+...   <input type="radio" name="my-input" id="no">
+...   <label for="no">No</label>
+... </div>
+... 
+... <select name="my-select" id="fruit">
+...   <option id="1" value="opt1">Apples</option>
+...   <option id="2" value="opt2" selected>Grapes</option>
+...   <option id="3" value="opt3">Pears</option>
+... </select>
+... 
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':checked'))
+[<input checked="" id="yes" name="my-input" type="radio"/>, <option id="2" selected="" value="opt2">Grapes</option>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
+///
 
 ## `:default`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:default}
 
 Selects any form element that is the default among a group of related elements, including: `#!html <button>`,
 `#!html <input type="checkbox">`, `#!html <input type="radio">`, `#!html <option>` elements.
 
-=== "Syntax"
-    ```css
-    :default
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <form>
-    ... 
-    ... <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>
-    ... 
-    ... <select id="pet-select">
-    ...     <option value="">--Please choose an option--</option>
-    ...     <option id="dog" value="dog">Dog</option>
-    ...     <option id="cat" value="cat">Cat</option>
-    ...     <option id="hamster" value="hamster" selected>Hamster</option>
-    ...     <option id="parrot" value="parrot">Parrot</option>
-    ...     <option id="spider" value="spider">Spider</option>
-    ...     <option id="goldfish" value="goldfish">Goldfish</option>
-    ... </select>
-    ... </form>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':default'))
-    [<input checked="" id="summer" name="season" type="radio"/>, <option id="hamster" selected="" value="hamster">Hamster</option>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:default
+/// tab | Syntax
+```css
+:default
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <form>
+... 
+... <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>
+... 
+... <select id="pet-select">
+...     <option value="">--Please choose an option--</option>
+...     <option id="dog" value="dog">Dog</option>
+...     <option id="cat" value="cat">Cat</option>
+...     <option id="hamster" value="hamster" selected>Hamster</option>
+...     <option id="parrot" value="parrot">Parrot</option>
+...     <option id="spider" value="spider">Spider</option>
+...     <option id="goldfish" value="goldfish">Goldfish</option>
+... </select>
+... </form>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':default'))
+[<input checked="" id="summer" name="season" type="radio"/>, <option id="hamster" selected="" value="hamster">Hamster</option>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:default
+///
 
 ## `:defined`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}</span>:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:defined}
 
@@ -143,254 +153,275 @@ hyphens) that have been properly added to the custom element registry. Since ele
 element registry in Beautiful Soup, this will select all elements that are not custom tags. `:defined` is a HTML
 specific selector, so it doesn't apply to XML.
 
-=== "Syntax"
-    ```css
-    :defined
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <custom-element text="Custom element example text"></custom-element>
-    ... <p>Standard paragraph example text</p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('body > *:defined'))
-    [<p>Standard paragraph example text</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:defined
+/// tab | Syntax
+```css
+:defined
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <custom-element text="Custom element example text"></custom-element>
+... <p>Standard paragraph example text</p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('body > *:defined'))
+[<p>Standard paragraph example text</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:defined
+///
 
 ## `:dir()`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:dir}
 
 Selects elements based on text directionality. Accepts either `ltr` or `rtl` for "left to right" and "right to left"
 respectively.
 
-=== "Syntax"
-    ```css
-    :dir(ltr)
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <div>
-    ... <span dir="auto">זאת השפה העברית</span>
-    ... <span dir="ltr">Text</span>
-    ... </div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':dir(rtl)'))
-    [<span dir="auto">זאת השפה העברית</span>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
+/// tab | Syntax
+```css
+:dir(ltr)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <div>
+... <span dir="auto">זאת השפה העברית</span>
+... <span dir="ltr">Text</span>
+... </div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':dir(rtl)'))
+[<span dir="auto">זאת השפה העברית</span>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
+///
 
 ## `:disabled`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:disabled}
 
 Selects any element that is disabled.
 
-=== "Syntax"
-    ```css
-    :disabled
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <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>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('input:disabled'))
-    [<input disabled="" placeholder="Name" type="text"/>, <input disabled="" placeholder="Address" type="text"/>, <input disabled="" placeholder="Zip Code" type="text"/>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
+/// tab | Syntax
+```css
+:disabled
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <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>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('input:disabled'))
+[<input disabled="" placeholder="Name" type="text"/>, <input disabled="" placeholder="Address" type="text"/>, <input disabled="" placeholder="Zip Code" type="text"/>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
+///
 
 ## `:empty`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:empty}
 
 Selects elements that have no children and no text (whitespace is ignored).
 
-=== "Syntax"
-    ```css
-    :empty
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <span> <!-- comment --> </span>
-    ... <span></span>
-    ... <span><span>    </span></span>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('body :empty'))
-    [<span> <!-- comment --> </span>, <span></span>, <span>    </span>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
+/// tab | Syntax
+```css
+:empty
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <span> <!-- comment --> </span>
+... <span></span>
+... <span><span>    </span></span>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('body :empty'))
+[<span> <!-- comment --> </span>, <span></span>, <span>    </span>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
+///
 
 ## `:enabled`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:enabled}
 
 Selects any element that is enabled.
 
-=== "Syntax"
-    ```css
-    :enabled
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <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>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('input:enabled'))
-    [<input placeholder="Name" type="text"/>, <input placeholder="Address" type="text"/>, <input placeholder="Zip Code" type="text"/>, <input checked="" id="billing-checkbox" type="checkbox"/>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled
+/// tab | Syntax
+```css
+:enabled
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <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>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('input:enabled'))
+[<input placeholder="Name" type="text"/>, <input placeholder="Address" type="text"/>, <input placeholder="Zip Code" type="text"/>, <input checked="" id="billing-checkbox" type="checkbox"/>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled
+///
 
 ## `:first-child` {:#:first-child}
 
 Selects the first child in a group of sibling elements.
 
-=== "Syntax"
-    ```css
-    :first-child
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <p id="2"></p>
-    ... <p id="3"></p>
-    ... <p id="4"></p>
-    ... <p id="5"></p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('p:first-child'))
-    [<p id="0"></p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
+/// tab | Syntax
+```css
+:first-child
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <p id="2"></p>
+... <p id="3"></p>
+... <p id="4"></p>
+... <p id="5"></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('p:first-child'))
+[<p id="0"></p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
+///
 
 ## `:first-of-type` {:#:first-of-type}
 
 Selects the first child of a given type in a group of sibling elements.
 
-=== "Syntax"
-    ```css
-    element:first-of-type
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <span id="2"></span>
-    ... <span id="3"></span>
-    ... <span id="4"></span>
-    ... <span id="5"></span>
-    ... <span id="6"></span>
-    ... <p id="7"></p>
-    ... <p id="8"></p>
-    ... <p id="9"></p>
-    ... <p id="10"></p>
-    ... <span id="11"></span>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('span:first-of-type'))
-    [<span id="2"></span>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
+/// tab | Syntax
+```css
+element:first-of-type
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <span id="2"></span>
+... <span id="3"></span>
+... <span id="4"></span>
+... <span id="5"></span>
+... <span id="6"></span>
+... <p id="7"></p>
+... <p id="8"></p>
+... <p id="9"></p>
+... <p id="10"></p>
+... <span id="11"></span>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('span:first-of-type'))
+[<span id="2"></span>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
+///
 
 ## `:has()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#has}
 
@@ -406,63 +437,69 @@ improves performance in a live environment. As these performance concerns are no
 compared to a web browser, Soup Sieve has no intentions on restricting the nesting of `:has()`. Users can always choose
 not to nest `:has()` if there are concerns.
 
-=== "Syntax"
-    ```css
-    :has(selector)
-    :has(> selector)
-    :has(~ selector)
-    :has(+ selector)
-    :has(selector1, > selector2, ~ selector3, + selector4)
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <div><p>Test <span>paragraph</span></p></div>
-    ... <div><p class="class">Another test paragraph</p></div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('div:has(span, > .class)'))
-    [<div><p>Test <span>paragraph</span></p></div>, <div><p class="class">Another test paragraph</p></div>]  
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:has
+/// tab | Syntax
+```css
+:has(selector)
+:has(> selector)
+:has(~ selector)
+:has(+ selector)
+:has(selector1, > selector2, ~ selector3, + selector4)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <div><p>Test <span>paragraph</span></p></div>
+... <div><p class="class">Another test paragraph</p></div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('div:has(span, > .class)'))
+[<div><p>Test <span>paragraph</span></p></div>, <div><p class="class">Another test paragraph</p></div>]  
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:has
+///
 
 ## `:in-range`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:in-range}
 
 Selects all `#!html <input>` elements whose values are in range according to their `type`, `min`, and `max` attributes.
 
-=== "Syntax"
-    ```css
-    :in-range
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <input id="0" type="month" min="1980-02" max="2004-08" value="1999-05">
-    ... <input id="7" type="month" min="1980-02" max="2004-08" value="1979-02">
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':in-range'))
-    [<input id="0" max="2004-08" min="1980-02" type="month" value="1999-05"/>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
+/// tab | Syntax
+```css
+:in-range
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <input id="0" type="month" min="1980-02" max="2004-08" value="1999-05">
+... <input id="7" type="month" min="1980-02" max="2004-08" value="1979-02">
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':in-range'))
+[<input id="0" max="2004-08" min="1980-02" type="month" value="1999-05"/>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range
+///
 
 ## `:indeterminate`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:indeterminate}
 
@@ -470,59 +507,62 @@ Selects all form elements whose are in an indeterminate state.
 
 An element is considered indeterminate if:
 
-- The element is of type `#!html <input type="checkbox"/>` and the `indeterminate` attribute is set.
-- The element is of type `#!html <input type="radio"/>` and all other radio controls with the same name are not
-selected.
-- The element is of type `#!html <progress>` with no value.
-
-=== "Syntax"
-    ```css
-    :indeterminate
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <input type="checkbox" id="checkbox1" indeterminate>
-    ... <label for="checkbox1">I like cats.</label>
-    ... 
-    ... <input type="checkbox" id="checkbox2">
-    ... <label for="checkbox2">I like dogs.</label>
-    ... 
-    ... <form>
-    ...     <input type="radio" name="test" id="radio1">
-    ...     <label for="radio1">Yes</label>
-    ... 
-    ...     <input type="radio" name="test" id="radio2">
-    ...     <label for="radio2">No</label>
-    ... 
-    ...     <input type="radio" name="test" id="radio3">
-    ...     <label for="radio3">Maybe</label>
-    ... </form>
-    ... <form>
-    ...     <input type="radio" name="another" id="radio4">
-    ...     <label for="radio4">Red</label>
-    ... 
-    ...     <input type="radio" name="another" id="radio5" checked>
-    ...     <label for="radio5">Green</label>
-    ... 
-    ...     <input type="radio" name="another" id="radio6">
-    ...     <label for="radio6">Blue</label>
-    ... </form>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':indeterminate'))
-    [<input id="checkbox1" indeterminate="" type="checkbox"/>, <input id="radio1" name="test" type="radio"/>, <input id="radio2" name="test" type="radio"/>, <input id="radio3" name="test" type="radio"/>] 
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
+-   The element is of type `#!html <input type="checkbox"/>` and the `indeterminate` attribute is set.
+-   The element is of type `#!html <input type="radio"/>` and all other radio controls with the same name are not
+    selected.
+-   The element is of type `#!html <progress>` with no value.
+
+/// tab | Syntax
+```css
+:indeterminate
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <input type="checkbox" id="checkbox1" indeterminate>
+... <label for="checkbox1">I like cats.</label>
+... 
+... <input type="checkbox" id="checkbox2">
+... <label for="checkbox2">I like dogs.</label>
+... 
+... <form>
+...     <input type="radio" name="test" id="radio1">
+...     <label for="radio1">Yes</label>
+... 
+...     <input type="radio" name="test" id="radio2">
+...     <label for="radio2">No</label>
+... 
+...     <input type="radio" name="test" id="radio3">
+...     <label for="radio3">Maybe</label>
+... </form>
+... <form>
+...     <input type="radio" name="another" id="radio4">
+...     <label for="radio4">Red</label>
+... 
+...     <input type="radio" name="another" id="radio5" checked>
+...     <label for="radio5">Green</label>
+... 
+...     <input type="radio" name="another" id="radio6">
+...     <label for="radio6">Blue</label>
+... </form>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':indeterminate'))
+[<input id="checkbox1" indeterminate="" type="checkbox"/>, <input id="radio1" name="test" type="radio"/>, <input id="radio2" name="test" type="radio"/>, <input id="radio3" name="test" type="radio"/>] 
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
+///
 
 ## `:is()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:is}
 
@@ -535,77 +575,85 @@ While the level 4 specifications state that [compound](#compound-selector) selec
 (Safari) support complex selectors which are planned for level 5 CSS selectors. Soup Sieve also supports
 [complex](#complex-selector) selectors.
 
-=== "Syntax"
+/// tab | Syntax
+```css
+:is(selector1, selector2)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0">Some text <span id="1"> in a paragraph</span>.
+... <a id="2" href="http://google.com">Link.</a></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('[id]:is(a, span)'))
+[<span id="1"> in a paragraph</span>, <a href="http://google.com" id="2">Link.</a>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:is
+///
+
+## `:lang()` {:#:lang}
+
+//// define
+Level 3 CSS
+
+-   Selects an element whose associated language matches the provided **language** or whose language starts with the
+    provided **language** followed by a `-`. Language is determined by the rules of the document type.
+
+    /// tab | Syntax
     ```css
-    :is(selector1, selector2)
+    :lang(language)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <p id="0">Some text <span id="1"> in a paragraph</span>.
-    ... <a id="2" href="http://google.com">Link.</a></p>
+    ... <div lang="de-DE">
+    ...     <p id="1"></p>
+    ... </div>
+    ... <div lang="de-DE-1996">
+    ...     <p id="2"></p>
+    ... </div>
+    ... <div lang="de-Latn-DE">
+    ...     <p id="3"></p>
+    ... </div>
+    ... <div lang="de-Latf-DE">
+    ...     <p id="4"></p>
+    ... </div>
+    ... <div lang="de-Latn-DE-1996">
+    ...     <p id="5"></p>
+    ... </div>
+    ... <p id="6" lang="de-DE"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('[id]:is(a, span)'))
-    [<span id="1"> in a paragraph</span>, <a href="http://google.com" id="2">Link.</a>]
+    >>> print(soup.select('p:lang(de)'))
+    [<p id="1"></p>, <p id="2"></p>, <p id="3"></p>, <p id="4"></p>, <p id="5"></p>, <p id="6" lang="de-DE"></p>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:is
-
-## `:lang()` {:#:lang}
-
-Level 3 CSS
-: 
-    Selects an element whose associated language matches the provided **language** or whose language starts with the
-    provided **language** followed by a `-`. Language is determined by the rules of the document type.
-
-    === "Syntax"
-        ```css
-        :lang(language)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <div lang="de-DE">
-        ...     <p id="1"></p>
-        ... </div>
-        ... <div lang="de-DE-1996">
-        ...     <p id="2"></p>
-        ... </div>
-        ... <div lang="de-Latn-DE">
-        ...     <p id="3"></p>
-        ... </div>
-        ... <div lang="de-Latf-DE">
-        ...     <p id="4"></p>
-        ... </div>
-        ... <div lang="de-Latn-DE-1996">
-        ...     <p id="5"></p>
-        ... </div>
-        ... <p id="6" lang="de-DE"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('p:lang(de)'))
-        [<p id="1"></p>, <p id="2"></p>, <p id="3"></p>, <p id="4"></p>, <p id="5"></p>, <p id="6" lang="de-DE"></p>]
-        ```
-
+//// define
 Level 4 CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    The level 4 CSS specifications adds the ability to define multiple language tags using a comma separated list. The
+
+-   The level 4 CSS specifications adds the ability to define multiple language tags using a comma separated list. The
     specifications also allow for BCP 47 language ranges as described in [RFC4647](https://tools.ietf.org/html/rfc4647)
     for extended filtering. This enables implicit wildcard matching between subtags. For instance, `:lang(de-DE)` will
     match all of `de-DE`, `de-DE-1996`, `de-Latn-DE`, `de-Latf-DE`, and `de-Latn-DE-1996`. Implicit wildcard matching
@@ -613,116 +661,126 @@ Level 4 CSS:material-flask:{: title="Experimental" data-md-color-primary="purple
     beginning of the language. If desired an explicit wildcard between subtags can be used, but since implicit wildcard
     matching already takes place between subtags, it is not needed: `de-*-DE` would be the same as just using `de-DE`.
 
-    === "Syntax"
-        ```css
-        :lang('*-language', language2)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <div lang="de-DE">
-        ...     <p id="1"></p>
-        ... </div>
-        ... <div lang="en">
-        ...     <p id="2"></p>
-        ... </div>
-        ... <div lang="de-Latn-DE">
-        ...     <p id="3"></p>
-        ... </div>
-        ... <div lang="de-Latf-DE">
-        ...     <p id="4"></p>
-        ... </div>
-        ... <div lang="en-US">
-        ...     <p id="5"></p>
-        ... </div>
-        ... <p id="6" lang="de-DE"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('p:lang(de-DE, "*-US")'))
-        [<p id="1"></p>, <p id="3"></p>, <p id="4"></p>, <p id="5"></p>, <p id="6" lang="de-DE"></p>]
-        ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
-
-## `:last-child` {:#:last-child}
-
-Selects the last element among a group of sibling elements.
-
-=== "Syntax"
+    /// tab | Syntax
     ```css
-    :last-child
+    :lang('*-language', language2)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <p id="2"></p>
-    ... <p id="3"></p>
-    ... <p id="4"></p>
-    ... <p id="5"></p>
+    ... <div lang="de-DE">
+    ...     <p id="1"></p>
+    ... </div>
+    ... <div lang="en">
+    ...     <p id="2"></p>
+    ... </div>
+    ... <div lang="de-Latn-DE">
+    ...     <p id="3"></p>
+    ... </div>
+    ... <div lang="de-Latf-DE">
+    ...     <p id="4"></p>
+    ... </div>
+    ... <div lang="en-US">
+    ...     <p id="5"></p>
+    ... </div>
+    ... <p id="6" lang="de-DE"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('p:last-child'))
-    [<p id="5"></p>]
+    >>> print(soup.select('p:lang(de-DE, "*-US")'))
+    [<p id="1"></p>, <p id="3"></p>, <p id="4"></p>, <p id="5"></p>, <p id="6" lang="de-DE"></p>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
+///
 
-## `:last-of-type` {:#:last-of-type}
+## `:last-child` {:#:last-child}
 
-Selects the last child of a given type in a group of sibling elements.
+Selects the last element among a group of sibling elements.
 
-=== "Syntax"
-    ```css
-    element:last-of-type
-    ```
+/// tab | Syntax
+```css
+:last-child
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <p id="2"></p>
+... <p id="3"></p>
+... <p id="4"></p>
+... <p id="5"></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('p:last-child'))
+[<p id="5"></p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
+///
 
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <span id="2"></span>
-    ... <span id="3"></span>
-    ... <span id="4"></span>
-    ... <span id="5"></span>
-    ... <span id="6"></span>
-    ... <p id="7"></p>
-    ... <p id="8"></p>
-    ... <p id="9"></p>
-    ... <p id="10"></p>
-    ... <span id="11"></span>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('span:last-of-type'))
-    [<span id="11"></span>]
-    ```
+## `:last-of-type` {:#:last-of-type}
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
+Selects the last child of a given type in a group of sibling elements.
+
+/// tab | Syntax
+```css
+element:last-of-type
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <span id="2"></span>
+... <span id="3"></span>
+... <span id="4"></span>
+... <span id="5"></span>
+... <span id="6"></span>
+... <p id="7"></p>
+... <p id="8"></p>
+... <p id="9"></p>
+... <p id="10"></p>
+... <span id="11"></span>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('span:last-of-type'))
+[<span id="11"></span>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
+///
 
 ## `:link`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:link}
 
@@ -732,443 +790,132 @@ yet been visited.
 Since Beautiful Soup does not have *visited* states, this will match all links, essentially making the behavior the same
 as `:any-link`.
 
-=== "Syntax"
-    ```css
-    :link
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bsx
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p>A link to <a href="http://example.com">click</a></p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':link'))
-    [<a href="http://example.com">click</a>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:link
-
-!!! new "New in 2.2"
-    The CSS specification recently updated to not include `#!html <link>` in the definition; therefore, Soup Sieve has
-    removed it as well.
+/// tab | Syntax
+```css
+:link
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bsx
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p>A link to <a href="http://example.com">click</a></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':link'))
+[<a href="http://example.com">click</a>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:link
+///
+
+/// new | New in 2.2
+The CSS specification recently updated to not include `#!html <link>` in the definition; therefore, Soup Sieve has
+removed it as well.
+///
 
 ## `:not()` {:#:not}
 
+//// define
 Level 3 CSS
-: 
-    Selects all elements that do not match the selector. The level 3 CSS specification states that `:not()` only
-    supports simple selectors.
-
-    === "Syntax"
-        ```css
-        :not(simple-selector)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ...    <div>Here is some text.</div>
-        ...    <div>Here is some more text.</div>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('div:not(:-soup-contains(more))'))
-        [<div>Here is some text.</div>]
-        ```
-
-Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    Selects all elements that do not match any of the selectors in the selector list. While the level 4 specifications
-    state that [compound](#compound-selector) selectors are supported, some browsers (Safari) support complex selectors
-    which are planned for level 5 CSS selectors. Soup Sieve also supports [complex](#complex-selector) selectors.
-
-    === "Syntax"
-        ```css
-        :not(compound.selector, complex > selector)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ...    <div>Here is some text.</div>
-        ...    <div>Here is some more text.</div>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('*:not(html, head, body)'))
-        [<div>Here is some text.</div>, <div>Here is some more text.</div>]
-        ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:not
-
-## `:nth-child()` {:#:nth-child}
-
-`:nth-child()` matches elements based on their position in a group of siblings.
-
-
-Level 3 CSS
-: 
-    - The keywords `even` and `odd`  will respectively select elements whose position is either even or odd amongst a
-      group of siblings.
-
-    - Patterns in the form `an+b` selects elements based on their position in a group of siblings, for every positive
-      integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both be integers.
-
-    === "Syntax"
-        ```css
-        :nth-child(even)
-        :nth-child(odd)
-        :nth-child(2)
-        :nth-child(2n+2)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <p id="0"></p>
-        ... <p id="1"></p>
-        ... <p id="2"></p>
-        ... <p id="3"></p>
-        ... <p id="4"></p>
-        ... <p id="5"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('p:nth-child(even)'))
-        [<p id="1"></p>, <p id="3"></p>, <p id="5"></p>]
-        >>> print(soup.select('p:nth-child(odd)'))
-        [<p id="0"></p>, <p id="2"></p>, <p id="4"></p>]
-        >>> print(soup.select('p:nth-child(2)'))
-        [<p id="1"></p>]
-        >>> print(soup.select('p:nth-child(-n+3)'))
-        [<p id="0"></p>, <p id="1"></p>, <p id="2"></p>]
-        ```
-
-Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
-    also be substituted with `even` or `odd`.
-
-    When using the pattern `an+b of S`, the pattern will select elements from a sub-group of sibling elements that all
-    match the selector list (`[of S]?`), based on their position within that sub-group, using the pattern `an+b`, for
-    every positive integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both
-    be integers.
-
-    Essentially, `#!css img:nth-of-type(2)` would be equivalent to `#!css :nth-child(2 of img)`. The advantage of using
-    `:nth-child(an+b [of S]?)` over `:nth-of-type` is that `:nth-of-type` is restricted to types, while
-    `:nth-child(an+b [of S]?)` can use [complex](#complex-selector) selectors.
-
-    While the level 4 specifications state that [compound](#compound-selector) selectors are supported, complex
-    selectors are planned for level 5 CSS selectors. Soup Sieve supports [complex](#complex-selector) selectors.
-
-    === "Syntax"
-        ```css
-        :nth-child(2 of img)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <p id="0"></p>
-        ... <p id="1"></p>
-        ... <p id="2"></p>
-        ... <p id="3"></p>
-        ... <p id="4"></p>
-        ... <p id="5"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('*:nth-child(-n+3 of [id])'))
-        [<p id="0"></p>, <p id="1"></p>, <p id="2"></p>]
-        ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
-
-## `:nth-last-child()` {:#:nth-last-child}
-
-`:nth-last-child()` matches elements based on their position in a group of siblings, counting from the end.
-
-Level 3 CSS
-: 
-    - Counting from the end, the keywords `even` and `odd`  will respectively select elements whose position is either
-      even or odd amongst a group of siblings.
-
-    - Counting from the end, patterns in the form `an+b` selects elements based on their position in a group of
-      siblings, for every positive integer or zero value of `n`. The index of the first element is `1`. The values `a`
-      and `b` must both be integers.
-
-    === "Syntax"
-        ```css
-        :nth-last-child(even)
-        :nth-last-child(odd)
-        :nth-last-child(2)
-        :nth-last-child(2n+2)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <p id="0"></p>
-        ... <p id="1"></p>
-        ... <p id="2"></p>
-        ... <p id="3"></p>
-        ... <p id="4"></p>
-        ... <p id="5"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('p:nth-last-child(even)'))
-        [<p id="0"></p>, <p id="2"></p>, <p id="4"></p>]
-        >>> print(soup.select('p:nth-last-child(odd)'))
-        [<p id="1"></p>, <p id="3"></p>, <p id="5"></p>]
-        >>> print(soup.select('p:nth-last-child(2)'))
-        [<p id="4"></p>]
-        >>> print(soup.select('p:nth-last-child(-n+3)'))
-        [<p id="3"></p>, <p id="4"></p>, <p id="5"></p>]
-        ```
-
-Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
-: 
-    Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
-    also be substituted with `even` or `odd`.
-
-    When using the pattern `an+b of S`, the pattern will select elements from a sub-group of sibling elements that all
-    match the selector list (`[of S]?`), based on their position within that sub-group, using the pattern `an+b`, for
-    every positive integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both
-    be integers. Elements will be counted from the end.
-
-    Essentially, `#!css img:nth-last-of-type(2)` would be equivalent to `#!css :nth-last-child(2 of img)`. The advantage
-    of using `:nth-last-child(an+b [of S]?)` over `:nth-last-of-type` is that `:nth-last-of-type` is restricted to
-    types, while `:nth-last-child(an+b [of S]?)` can use [complex](#complex-selector) selectors.
-
-    While the level 4 specifications state that [compound](#compound-selector) selectors are supported, complex
-    selectors are planned for level 5 CSS selectors. Soup Sieve supports [complex](#complex-selector) selectors.
-
-    === "Syntax"
-        ```css
-        :nth-last-child(2 of img)
-        ```
-
-    === "Usage"
-        ```pycon3
-        >>> from bs4 import BeautifulSoup as bs
-        >>> html = """
-        ... <html>
-        ... <head></head>
-        ... <body>
-        ... <p id="0"></p>
-        ... <p id="1"></p>
-        ... <p id="2"></p>
-        ... <p id="3"></p>
-        ... <p id="4"></p>
-        ... <p id="5"></p>
-        ... </body>
-        ... </html>
-        ... """
-        >>> soup = bs(html, 'html5lib')
-        >>> print(soup.select('*:nth-last-child(-n+3 of [id])'))
-        [<p id="3"></p>, <p id="4"></p>, <p id="5"></p>]
-        ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
-
-## `:nth-last-of-type()` {:#:nth-last-of-type}
-
-`:nth-of-type()` matches elements of a given type, based on their position among a group of siblings, counting from the
-end.
-
-- The keywords `even` and `odd`, and will respectively select elements, from a sub-group of
-  sibling elements that all match the given type, whose position is either even or odd amongst that sub-group of
-  siblings. Starting position is counted from the end.
-
-- Patterns in the form `an+b` select from a sub-group of sibling elements that all match the given type, based on their
-  position within that sub-group, for every positive integer or zero value of `n`. The index of the first element is
-  `1`. The values `a` and `b` must both be integers. Starting position is counted from the end.
-
-=== "Syntax"
-    ```css
-    element:nth-last-of-type(even)
-    element:nth-last-of-type(odd)
-    element:nth-last-of-type(2)
-    element:nth-last-of-type(2n+2)
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <span id="2"></span>
-    ... <span id="3"></span>
-    ... <span id="4"></span>
-    ... <span id="5"></span>
-    ... <span id="6"></span>
-    ... <p id="7"></p>
-    ... <p id="8"></p>
-    ... <p id="9"></p>
-    ... <p id="10"></p>
-    ... <span id="11"></span>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('span:nth-last-of-type(even)'))
-    [<span id="2"></span>, <span id="4"></span>, <span id="6"></span>]
-    >>> print(soup.select('span:nth-last-of-type(odd)'))
-    [<span id="3"></span>, <span id="5"></span>, <span id="11"></span>]
-    >>> print(soup.select('p:nth-last-of-type(2)'))
-    [<p id="9"></p>]
-    >>> print(soup.select('p:nth-last-of-type(-n+3)'))
-    [<p id="8"></p>, <p id="9"></p>, <p id="10"></p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type
-
-## `:nth-of-type()` {:#:nth-of-type}
-
-`:nth-of-type()` matches elements of a given type, based on their position among a group of siblings.
-
-- The keywords `even` and `odd`, and will respectively select elements, from a sub-group of
-  sibling elements that all match the given type, whose position is either even or odd amongst that sub-group of
-  siblings.
 
-- Patterns in the form `an+b` select from a sub-group of sibling elements that all match the given type, based on their
-  position within that sub-group, for every positive integer or zero value of `n`. The index of the first element is
-  `1`. The values `a` and `b` must both be integers.
+-   Selects all elements that do not match the selector. The level 3 CSS specification states that `:not()` only
+    supports simple selectors.
 
-=== "Syntax"
+    /// tab | Syntax
     ```css
-    element:nth-of-type(even)
-    element:nth-of-type(odd)
-    element:nth-of-type(2)
-    element:nth-of-type(2n+2)
+    :not(simple-selector)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <p id="0"></p>
-    ... <p id="1"></p>
-    ... <span id="2"></span>
-    ... <span id="3"></span>
-    ... <span id="4"></span>
-    ... <span id="5"></span>
-    ... <span id="6"></span>
-    ... <p id="7"></p>
-    ... <p id="8"></p>
-    ... <p id="9"></p>
-    ... <p id="10"></p>
-    ... <span id="11"></span>
+    ...    <div>Here is some text.</div>
+    ...    <div>Here is some more text.</div>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('span:nth-of-type(even)'))
-    [<span id="3"></span>, <span id="5"></span>, <span id="11"></span>]
-    >>> print(soup.select('span:nth-of-type(odd)'))
-    [<span id="2"></span>, <span id="4"></span>, <span id="6"></span>]
-    >>> print(soup.select('p:nth-of-type(2)'))
-    [<p id="1"></p>]
-    >>> print(soup.select('p:nth-of-type(-n+3)'))
-    [<p id="0"></p>, <p id="1"></p>, <p id="7"></p>]
+    >>> print(soup.select('div:not(:-soup-contains(more))'))
+    [<div>Here is some text.</div>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
-
-## `:only-child` {:#:only-child}
+//// define
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 
-Selects element without any siblings.
+-   Selects all elements that do not match any of the selectors in the selector list. While the level 4 specifications
+    state that [compound](#compound-selector) selectors are supported, some browsers (Safari) support complex selectors
+    which are planned for level 5 CSS selectors. Soup Sieve also supports [complex](#complex-selector) selectors.
 
-=== "Syntax"
+    /// tab | Syntax
     ```css
-    :only-child
+    :not(compound.selector, complex > selector)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <div>
-    ...     <p id="0"></p>
-    ...     <p id="1"></p>
-    ...     <p id="2"></p>
-    ...     <p id="3"></p>
-    ...     <p id="4"></p>
-    ...     <p id="5"></p>
-    ... </div>
-    ... <div>
-    ...     <p id="6"></p>
-    ... </div>
+    ...    <div>Here is some text.</div>
+    ...    <div>Here is some more text.</div>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('p:only-child'))
-    [<p id="6"></p>]
+    >>> print(soup.select('*:not(html, head, body)'))
+    [<div>Here is some text.</div>, <div>Here is some more text.</div>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:not
+///
 
-## `:only-of-type` {:#:only-of-type}
+## `:nth-child()` {:#:nth-child}
 
-Selects element without any siblings that matches a given type.
+`:nth-child()` matches elements based on their position in a group of siblings.
+
+//// define
+Level 3 CSS
 
-=== "Syntax"
+- 
+    -   The keywords `even` and `odd`  will respectively select elements whose position is either even or odd amongst a
+        group of siblings.
+
+    -   Patterns in the form `an+b` selects elements based on their position in a group of siblings, for every positive
+        integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both be
+        integers.
+
+    /// tab | Syntax
     ```css
-    element:only-of-type
+    :nth-child(even)
+    :nth-child(odd)
+    :nth-child(2)
+    :nth-child(2n+2)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
@@ -1177,167 +924,536 @@ Selects element without any siblings that matches a given type.
     ... <body>
     ... <p id="0"></p>
     ... <p id="1"></p>
-    ... <span id="2"></span>
+    ... <p id="2"></p>
     ... <p id="3"></p>
     ... <p id="4"></p>
     ... <p id="5"></p>
-    ... <p id="6"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('span:only-of-type'))
-    [<span id="2"></span>]
+    >>> print(soup.select('p:nth-child(even)'))
+    [<p id="1"></p>, <p id="3"></p>, <p id="5"></p>]
+    >>> print(soup.select('p:nth-child(odd)'))
+    [<p id="0"></p>, <p id="2"></p>, <p id="4"></p>]
+    >>> print(soup.select('p:nth-child(2)'))
+    [<p id="1"></p>]
+    >>> print(soup.select('p:nth-child(-n+3)'))
+    [<p id="0"></p>, <p id="1"></p>, <p id="2"></p>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type
+//// define
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 
-## `:optional`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:optional}
+-   Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
+    also be substituted with `even` or `odd`.
 
-Selects any `#!html <input>`, `#!html <select>`, or `#!html <textarea>` element that does not have the `required`
-attribute set on it.
+    When using the pattern `an+b of S`, the pattern will select elements from a sub-group of sibling elements that all
+    match the selector list (`[of S]?`), based on their position within that sub-group, using the pattern `an+b`, for
+    every positive integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both
+    be integers.
+
+    Essentially, `#!css img:nth-of-type(2)` would be equivalent to `#!css :nth-child(2 of img)`. The advantage of using
+    `:nth-child(an+b [of S]?)` over `:nth-of-type` is that `:nth-of-type` is restricted to types, while
+    `:nth-child(an+b [of S]?)` can use [complex](#complex-selector) selectors.
+
+    While the level 4 specifications state that [compound](#compound-selector) selectors are supported, complex
+    selectors are planned for level 5 CSS selectors. Soup Sieve supports [complex](#complex-selector) selectors.
 
-=== "Syntax"
+    /// tab | Syntax
     ```css
-    :optional
+    :nth-child(2 of img)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <form>
-    ... <input type="name" required>
-    ... <input type="checkbox" required>
-    ... <input type="email">
-    ... <textarea name="name" cols="30" rows="10" required></textarea>
-    ... <select name="nm" required>
-    ...     <!-- options -->
-    ... </select>
-    ... </form>
+    ... <p id="0"></p>
+    ... <p id="1"></p>
+    ... <p id="2"></p>
+    ... <p id="3"></p>
+    ... <p id="4"></p>
+    ... <p id="5"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':optional'))
-    [<input type="email"/>]
+    >>> print(soup.select('*:nth-child(-n+3 of [id])'))
+    [<p id="0"></p>, <p id="1"></p>, <p id="2"></p>]
     ```
+    ///
+////
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:optional
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
+///
 
-## `:out-of-range`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:out-of-range}
+## `:nth-last-child()` {:#:nth-last-child}
 
-Selects all `#!html <input>` elements whose values are out of range according to their `type`, `min`, and `max`
-attributes.
+`:nth-last-child()` matches elements based on their position in a group of siblings, counting from the end.
+
+//// define
+Level 3 CSS
+
+- 
+    -   Counting from the end, the keywords `even` and `odd`  will respectively select elements whose position is either
+        even or odd amongst a group of siblings.
 
-=== "Syntax"
+    -   Counting from the end, patterns in the form `an+b` selects elements based on their position in a group of
+        siblings, for every positive integer or zero value of `n`. The index of the first element is `1`. The values `a`
+        and `b` must both be integers.
+
+    /// tab | Syntax
     ```css
-    :out-of-range
+    :nth-last-child(even)
+    :nth-last-child(odd)
+    :nth-last-child(2)
+    :nth-last-child(2n+2)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <input id="0" type="month" min="1980-02" max="2004-08" value="1999-05">
-    ... <input id="7" type="month" min="1980-02" max="2004-08" value="1979-02">
+    ... <p id="0"></p>
+    ... <p id="1"></p>
+    ... <p id="2"></p>
+    ... <p id="3"></p>
+    ... <p id="4"></p>
+    ... <p id="5"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':out-of-range'))
-    [<input id="7" max="2004-08" min="1980-02" type="month" value="1979-02"/>]
-    ```
+    >>> print(soup.select('p:nth-last-child(even)'))
+    [<p id="0"></p>, <p id="2"></p>, <p id="4"></p>]
+    >>> print(soup.select('p:nth-last-child(odd)'))
+    [<p id="1"></p>, <p id="3"></p>, <p id="5"></p>]
+    >>> print(soup.select('p:nth-last-child(2)'))
+    [<p id="4"></p>]
+    >>> print(soup.select('p:nth-last-child(-n+3)'))
+    [<p id="3"></p>, <p id="4"></p>, <p id="5"></p>]
+    ```
+    ///
+////
+
+//// define
+Level 4+ CSS:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon}
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range
+-   Level 4 CSS adds the additional pattern in the form `an+b of S` where `S` represents a selector list. `an+b` can
+    also be substituted with `even` or `odd`.
 
-## `:placeholder-shown`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:placeholder-shown}
+    When using the pattern `an+b of S`, the pattern will select elements from a sub-group of sibling elements that all
+    match the selector list (`[of S]?`), based on their position within that sub-group, using the pattern `an+b`, for
+    every positive integer or zero value of `n`. The index of the first element is `1`. The values `a` and `b` must both
+    be integers. Elements will be counted from the end.
 
-Selects any `#!html <input>` or `#!html <textarea>` element that is currently displaying placeholder text via the
-`placeholder` attribute.
+    Essentially, `#!css img:nth-last-of-type(2)` would be equivalent to `#!css :nth-last-child(2 of img)`. The advantage
+    of using `:nth-last-child(an+b [of S]?)` over `:nth-last-of-type` is that `:nth-last-of-type` is restricted to
+    types, while `:nth-last-child(an+b [of S]?)` can use [complex](#complex-selector) selectors.
+
+    While the level 4 specifications state that [compound](#compound-selector) selectors are supported, complex
+    selectors are planned for level 5 CSS selectors. Soup Sieve supports [complex](#complex-selector) selectors.
 
-=== "Syntax"
+    /// tab | Syntax
     ```css
-    :placeholder-shown
+    :nth-last-child(2 of img)
     ```
+    ///
 
-=== "Usage"
+    /// tab | Usage
     ```pycon3
     >>> from bs4 import BeautifulSoup as bs
     >>> html = """
     ... <html>
     ... <head></head>
     ... <body>
-    ... <input id="0" placeholder="This is some text">
-    ... <textarea id="1" placeholder="This is some text"></textarea>
+    ... <p id="0"></p>
+    ... <p id="1"></p>
+    ... <p id="2"></p>
+    ... <p id="3"></p>
+    ... <p id="4"></p>
+    ... <p id="5"></p>
     ... </body>
     ... </html>
     ... """
     >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':placeholder-shown'))
-    [<input id="0" placeholder="This is some text"/>, <textarea id="1" placeholder="This is some text"></textarea>]
+    >>> print(soup.select('*:nth-last-child(-n+3 of [id])'))
+    [<p id="3"></p>, <p id="4"></p>, <p id="5"></p>]
     ```
+    ///
+////
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
+///
+
+## `:nth-last-of-type()` {:#:nth-last-of-type}
+
+`:nth-of-type()` matches elements of a given type, based on their position among a group of siblings, counting from the
+end.
+
+-   The keywords `even` and `odd`, and will respectively select elements, from a sub-group of
+    sibling elements that all match the given type, whose position is either even or odd amongst that sub-group of
+    siblings. Starting position is counted from the end.
+
+-   Patterns in the form `an+b` select from a sub-group of sibling elements that all match the given type, based on
+    their position within that sub-group, for every positive integer or zero value of `n`. The index of the first
+    element is `1`. The values `a` and `b` must both be integers. Starting position is counted from the end.
+
+/// tab | Syntax
+```css
+element:nth-last-of-type(even)
+element:nth-last-of-type(odd)
+element:nth-last-of-type(2)
+element:nth-last-of-type(2n+2)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <span id="2"></span>
+... <span id="3"></span>
+... <span id="4"></span>
+... <span id="5"></span>
+... <span id="6"></span>
+... <p id="7"></p>
+... <p id="8"></p>
+... <p id="9"></p>
+... <p id="10"></p>
+... <span id="11"></span>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('span:nth-last-of-type(even)'))
+[<span id="2"></span>, <span id="4"></span>, <span id="6"></span>]
+>>> print(soup.select('span:nth-last-of-type(odd)'))
+[<span id="3"></span>, <span id="5"></span>, <span id="11"></span>]
+>>> print(soup.select('p:nth-last-of-type(2)'))
+[<p id="9"></p>]
+>>> print(soup.select('p:nth-last-of-type(-n+3)'))
+[<p id="8"></p>, <p id="9"></p>, <p id="10"></p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type
+///
+
+## `:nth-of-type()` {:#:nth-of-type}
+
+`:nth-of-type()` matches elements of a given type, based on their position among a group of siblings.
+
+-   The keywords `even` and `odd`, and will respectively select elements, from a sub-group of
+    sibling elements that all match the given type, whose position is either even or odd amongst that sub-group of
+    siblings.
+
+-   Patterns in the form `an+b` select from a sub-group of sibling elements that all match the given type, based on
+    their position within that sub-group, for every positive integer or zero value of `n`. The index of the first
+    element is `1`. The values `a` and `b` must both be integers.
+
+/// tab | Syntax
+```css
+element:nth-of-type(even)
+element:nth-of-type(odd)
+element:nth-of-type(2)
+element:nth-of-type(2n+2)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <span id="2"></span>
+... <span id="3"></span>
+... <span id="4"></span>
+... <span id="5"></span>
+... <span id="6"></span>
+... <p id="7"></p>
+... <p id="8"></p>
+... <p id="9"></p>
+... <p id="10"></p>
+... <span id="11"></span>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('span:nth-of-type(even)'))
+[<span id="3"></span>, <span id="5"></span>, <span id="11"></span>]
+>>> print(soup.select('span:nth-of-type(odd)'))
+[<span id="2"></span>, <span id="4"></span>, <span id="6"></span>]
+>>> print(soup.select('p:nth-of-type(2)'))
+[<p id="1"></p>]
+>>> print(soup.select('p:nth-of-type(-n+3)'))
+[<p id="0"></p>, <p id="1"></p>, <p id="7"></p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
+///
+
+## `:only-child` {:#:only-child}
+
+Selects element without any siblings.
+
+/// tab | Syntax
+```css
+:only-child
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <div>
+...     <p id="0"></p>
+...     <p id="1"></p>
+...     <p id="2"></p>
+...     <p id="3"></p>
+...     <p id="4"></p>
+...     <p id="5"></p>
+... </div>
+... <div>
+...     <p id="6"></p>
+... </div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('p:only-child'))
+[<p id="6"></p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child
+///
+
+## `:only-of-type` {:#:only-of-type}
+
+Selects element without any siblings that matches a given type.
 
-!!! note "Parser Differences"
-    In general, when an input has a placeholder, but the element also has valid content, the placeholder is not shown.
-    For instance, when a `textarea` has actual text associated with the element, the placeholder is overridden with the
-    actual content. A `textarea` is allowed no more than a single newline to be considered as having no content
-    (carriage returns don't count).
+/// tab | Syntax
+```css
+element:only-of-type
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0"></p>
+... <p id="1"></p>
+... <span id="2"></span>
+... <p id="3"></p>
+... <p id="4"></p>
+... <p id="5"></p>
+... <p id="6"></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('span:only-of-type'))
+[<span id="2"></span>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type
+///
 
-    `html5lib` will strip out carriage returns, but `lxml` and `html.parser` will not. This will cause a difference
-    between the parsers when dealing with Windows style line endings and `textareas`. `html5lib` seems to follow
-    *closest* to what real browsers do. Soup Sieve is simply following the specification as best it can. Unfortunately,
-    it can't account for the quirks of the parsers in this case without introducing other issues.
+## `:optional`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:optional}
+
+Selects any `#!html <input>`, `#!html <select>`, or `#!html <textarea>` element that does not have the `required`
+attribute set on it.
+
+/// tab | Syntax
+```css
+:optional
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <form>
+... <input type="name" required>
+... <input type="checkbox" required>
+... <input type="email">
+... <textarea name="name" cols="30" rows="10" required></textarea>
+... <select name="nm" required>
+...     <!-- options -->
+... </select>
+... </form>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':optional'))
+[<input type="email"/>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:optional
+///
+
+## `:out-of-range`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:out-of-range}
+
+Selects all `#!html <input>` elements whose values are out of range according to their `type`, `min`, and `max`
+attributes.
+
+/// tab | Syntax
+```css
+:out-of-range
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <input id="0" type="month" min="1980-02" max="2004-08" value="1999-05">
+... <input id="7" type="month" min="1980-02" max="2004-08" value="1979-02">
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':out-of-range'))
+[<input id="7" max="2004-08" min="1980-02" type="month" value="1979-02"/>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range
+///
+
+## `:placeholder-shown`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:placeholder-shown}
+
+Selects any `#!html <input>` or `#!html <textarea>` element that is currently displaying placeholder text via the
+`placeholder` attribute.
 
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
+/// tab | Syntax
+```css
+:placeholder-shown
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <input id="0" placeholder="This is some text">
+... <textarea id="1" placeholder="This is some text"></textarea>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':placeholder-shown'))
+[<input id="0" placeholder="This is some text"/>, <textarea id="1" placeholder="This is some text"></textarea>]
+```
+///
+
+/// note | Parser Differences
+In general, when an input has a placeholder, but the element also has valid content, the placeholder is not shown.
+For instance, when a `textarea` has actual text associated with the element, the placeholder is overridden with the
+actual content. A `textarea` is allowed no more than a single newline to be considered as having no content
+(carriage returns don't count).
+
+`html5lib` will strip out carriage returns, but `lxml` and `html.parser` will not. This will cause a difference
+between the parsers when dealing with Windows style line endings and `textareas`. `html5lib` seems to follow
+*closest* to what real browsers do. Soup Sieve is simply following the specification as best it can. Unfortunately,
+it can't account for the quirks of the parsers in this case without introducing other issues.
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
+///
 
 ## `:read-only`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:read-only}
 
 Selects elements (such as `#!html <input>` or `#!html <textarea>`) that are *not* editable by the user. This does not
 just apply to form elements with `readonly` set, but it applies to **any** element that cannot be edited by the user.
 
-=== "Syntax"
-    ```css
-    :read-only
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... 
-    ... <input id="0">
-    ... <input id="1" disabled>
-    ... <input id="2" type="number" readonly>
-    ... 
-    ... <textarea id="3"></textarea>
-    ... 
-    ... <p id="4">Not editable</p>
-    ... <p id="5" contenteditable="true">Editable text</p>
-    ... 
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('body :read-only'))
-    [<input disabled="" id="1"/>, <input id="2" readonly="" type="number"/>, <p id="4">Not editable</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
+/// tab | Syntax
+```css
+:read-only
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... 
+... <input id="0">
+... <input id="1" disabled>
+... <input id="2" type="number" readonly>
+... 
+... <textarea id="3"></textarea>
+... 
+... <p id="4">Not editable</p>
+... <p id="5" contenteditable="true">Editable text</p>
+... 
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('body :read-only'))
+[<input disabled="" id="1"/>, <input id="2" readonly="" type="number"/>, <p id="4">Not editable</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
+///
 
 ## `:read-write`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:read-write}
 
@@ -1345,112 +1461,121 @@ Selects elements (such as `#!html <input>` or `#!html <textarea>`) that are edit
 apply to form elements as it applies to **any** element that can be edited by the user, such as a `#!html <p>` element
 with `contenteditable` set on it.
 
-=== "Syntax"
-    ```css
-    :read-only
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... 
-    ... <input id="0">
-    ... <input id="1" disabled>
-    ... <input id="2" type="number" readonly>
-    ... 
-    ... <textarea id="3"></textarea>
-    ... 
-    ... <p id="4">Not editable</p>
-    ... <p id="5" contenteditable="true">Editable text</p>
-    ... 
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('body :read-write'))
-    [<input id="0"/>, <textarea id="3"></textarea>, <p contenteditable="true" id="5">Editable text</p>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
+/// tab | Syntax
+```css
+:read-only
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... 
+... <input id="0">
+... <input id="1" disabled>
+... <input id="2" type="number" readonly>
+... 
+... <textarea id="3"></textarea>
+... 
+... <p id="4">Not editable</p>
+... <p id="5" contenteditable="true">Editable text</p>
+... 
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('body :read-write'))
+[<input id="0"/>, <textarea id="3"></textarea>, <p contenteditable="true" id="5">Editable text</p>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
+///
 
 ## `:required`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:required}
 
 Selects any `#!html <input>`, `#!html <select>`, or `#!html <textarea>` element that has the `required` attribute set on
 it.
 
-=== "Syntax"
-    ```css
-    :required
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <form>
-    ... <input type="name" required>
-    ... <input type="checkbox" required>
-    ... <input type="email">
-    ... <textarea name="name" cols="30" rows="10" required></textarea>
-    ... <select name="nm" required>
-    ...     <!-- options -->
-    ... </select>
-    ... </form>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':required'))
-    [<input required="" type="name"/>, <input required="" type="checkbox"/>, <textarea cols="30" name="name" required="" rows="10"></textarea>, <select name="nm" required="">
-        <!-- options -->
-    </select>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:required
+/// tab | Syntax
+```css
+:required
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <form>
+... <input type="name" required>
+... <input type="checkbox" required>
+... <input type="email">
+... <textarea name="name" cols="30" rows="10" required></textarea>
+... <select name="nm" required>
+...     <!-- options -->
+... </select>
+... </form>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':required'))
+[<input required="" type="name"/>, <input required="" type="checkbox"/>, <textarea cols="30" name="name" required="" rows="10"></textarea>, <select name="nm" required="">
+    <!-- options -->
+</select>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:required
+///
 
 ## `:root` {:#:root}
 
 Selects the root element of a document tree.
 
-=== "Syntax"
-    ```css
-    :root
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ...    <div>Here is some text.</div>
-    ...    <div>Here is some more text.</div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select(':root'))
-    [<html><head></head>
-    <body>
-        <div>Here is some text.</div>
-        <div>Here is some more text.</div>
-
-
-    </body></html>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:root
+/// tab | Syntax
+```css
+:root
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...    <div>Here is some text.</div>
+...    <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select(':root'))
+[<html><head></head>
+<body>
+    <div>Here is some text.</div>
+    <div>Here is some more text.</div>
+
+
+</body></html>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:root
+///
 
 ## `:scope`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:scope}
 
@@ -1459,30 +1584,33 @@ using `:scope` on a div (`#!py3 sv.select(':scope > p', soup.div)`) `:scope` wou
 no others. If called on the Beautiful Soup object which represents the entire document, it would simply select
 [`:root`](#:root).
 
-=== "Syntax"
-    ```css
-    :scope
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ...    <div>Here is some text.</div>
-    ...    <div>Here is some more text.</div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select_one('body').select(':scope > div'))
-    [<div>Here is some text.</div>, <div>Here is some more text.</div>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
+/// tab | Syntax
+```css
+:scope
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...    <div>Here is some text.</div>
+...    <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select_one('body').select(':scope > div'))
+[<div>Here is some text.</div>, <div>Here is some more text.</div>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
+///
 
 ## `:where()`:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:where}
 
@@ -1495,30 +1623,33 @@ While the level 4 specifications state that [compound](#compound-selector) selec
 (Safari) support complex selectors which are planned for level 5 CSS selectors. Soup Sieve also supports
 [complex](#complex-selector) selectors.
 
-=== "Syntax"
-    ```css
-    :where(selector1, selector2)
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ... <p id="0">Some text <span id="1"> in a paragraph</span>.
-    ... <a id="2" href="http://google.com">Link.</a></p>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('[id]:where(a, span)'))
-    [<span id="1"> in a paragraph</span>, <a href="http://google.com" id="2">Link.</a>]
-    ```
-
-!!! tip "Additional Reading"
-    https://developer.mozilla.org/en-US/docs/Web/CSS/:where
+/// tab | Syntax
+```css
+:where(selector1, selector2)
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+... <p id="0">Some text <span id="1"> in a paragraph</span>.
+... <a id="2" href="http://google.com">Link.</a></p>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('[id]:where(a, span)'))
+[<span id="1"> in a paragraph</span>, <a href="http://google.com" id="2">Link.</a>]
+```
+///
+
+/// tip | Additional Reading
+https://developer.mozilla.org/en-US/docs/Web/CSS/:where
+///
 
 ## `:-soup-contains()`:material-star:{: title="Custom" data-md-color-primary="green" .icon} {:#:-soup-contains}
 
@@ -1530,37 +1661,41 @@ differences: it is called `:-soup-contains()` instead of `:contains()`, and it c
 comma separated list of values. An element needs only to match at least one of the items in the comma separated list to
 be considered matching.
 
-!!! warning "Rename 2.1"
-    The name `:-soup-contains()` is new in version 2.1. Previously, it was known by `:contains()`. While the alias of
-    `:contains()` is currently allowed, this alias is deprecated moving forward and will be removed in a future version.
-    It is recommended to migrate to the name `:-soup-contains` moving forward.
-
-!!! warning "Expensive Operation"
-    `:-soup-contains()` is an expensive operation as it scans all the text nodes of an element under consideration,
-    which includes all descendants. Using highly specific selectors can reduce how often it is evaluated.
-
-=== "Syntax"
-    ```css
-    :-soup-contains(text)
-    :-soup-contains("This text", "or this text")
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ...   <div>Here is <span>some text</span>.</div>
-    ...   <div>Here is some more text.</div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('div:-soup-contains("some text")'))
-    [<div>Here is <span>some text</span>.</div>]
-    ```
+/// warning | Rename 2.1
+The name `:-soup-contains()` is new in version 2.1. Previously, it was known by `:contains()`. While the alias of
+`:contains()` is currently allowed, this alias is deprecated moving forward and will be removed in a future version.
+It is recommended to migrate to the name `:-soup-contains` moving forward.
+///
+
+/// warning | Expensive Operation
+`:-soup-contains()` is an expensive operation as it scans all the text nodes of an element under consideration,
+which includes all descendants. Using highly specific selectors can reduce how often it is evaluated.
+///
+
+/// tab | Syntax
+```css
+:-soup-contains(text)
+:-soup-contains("This text", "or this text")
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...   <div>Here is <span>some text</span>.</div>
+...   <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('div:-soup-contains("some text")'))
+[<div>Here is <span>some text</span>.</div>]
+```
+///
 
 ## `:-soup-contains-own()`:material-star:{: title="Custom" data-md-color-primary="green" .icon} {:#:-soup-contains-own}
 
@@ -1569,31 +1704,34 @@ text is broken up with with descendant elements, each text node will be evaluate
 
 Syntax is the same as [`:-soup-contains()`](#:-soup-contains).
 
-=== "Syntax"
-    ```css
-    :-soup-contains-own(text)
-    :-soup-contains-own("This text", "or this text")
-    ```
-
-=== "Usage"
-    ```pycon3
-    >>> from bs4 import BeautifulSoup as bs
-    >>> html = """
-    ... <html>
-    ... <head></head>
-    ... <body>
-    ...   <div>Here is <span>some text</span>.</div>
-    ...   <div>Here is some more text.</div>
-    ... </body>
-    ... </html>
-    ... """
-    >>> soup = bs(html, 'html5lib')
-    >>> print(soup.select('div:-soup-contains-own("some")'))
-    [<div>Here is some more text.</div>]
-    ```
-
-!!! new "New in 2.1"
-    `:-soup-contains-own()` was added in 2.1.
+/// tab | Syntax
+```css
+:-soup-contains-own(text)
+:-soup-contains-own("This text", "or this text")
+```
+///
+
+/// tab | Usage
+```pycon3
+>>> from bs4 import BeautifulSoup as bs
+>>> html = """
+... <html>
+... <head></head>
+... <body>
+...   <div>Here is <span>some text</span>.</div>
+...   <div>Here is some more text.</div>
+... </body>
+... </html>
+... """
+>>> soup = bs(html, 'html5lib')
+>>> print(soup.select('div:-soup-contains-own("some")'))
+[<div>Here is some more text.</div>]
+```
+///
+
+/// new | New in 2.1
+`:-soup-contains-own()` was added in 2.1.
+///
 
 --8<--
 selector_styles.md
diff --git a/docs/src/markdown/selectors/unsupported.md b/docs/src/markdown/selectors/unsupported.md
index 69c6767..21fe336 100644
--- a/docs/src/markdown/selectors/unsupported.md
+++ b/docs/src/markdown/selectors/unsupported.md
@@ -11,163 +11,180 @@ be removed.
 
 Selects active elements.
 
-=== "Syntax"
-    ```css
-    :active
-    ```
+/// tab | Syntax
+```css
+:active
+```
+///
 
 ## `:current`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:current}
 
 `:current` selects the element, or an ancestor of the element, that is currently being displayed. The functional form of
 `:current()` takes a compound selector list.
 
-=== "Syntax"
-    ```css
-    :current
-    :current(selector1, selector2)
-    ```
+/// tab | Syntax
+```css
+:current
+:current(selector1, selector2)
+```
+///
 
 ## `:focus`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:focus}
 
 Represents an an element that has received focus.
 
-=== "Syntax"
-    ```css
-    :focus
-    ```
+/// tab | Syntax
+```css
+:focus
+```
+///
 
 ## `:focus-visible`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:focus-visible}
 
 Selects an element that matches `:focus` and the user agent determines that the focus should be made evident on the
 element.
 
-=== "Syntax"
-    ```css
-    :focus-visible
-    ```
+/// tab | Syntax
+```css
+:focus-visible
+```
+///
 
 ## `:focus-within`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:focus-within}
 
 Selects an element that has received focus or contains an element that has received focus.
 
-=== "Syntax"
-    ```css
-    :focus-within
-    ```
+/// tab | Syntax
+```css
+:focus-within
+```
+///
 
 ## `:future`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:future}
 
 Selects an element that is defined to occur entirely after a `:current` element.
 
-=== "Syntax"
-    ```css
-    :future
-    ```
+/// tab | Syntax
+```css
+:future
+```
+///
 
 ## `:host`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#host}
 
 `:host` selects the element hosting a shadow tree. While the function form of `:host()` takes a complex selector list
 and matches the shadow host only if it matches one of the selectors in the list.
 
-=== "Syntax"
-    ```css
-    :host
-    :host(selector1, selector2)
-    ```
+/// tab | Syntax
+```css
+:host
+:host(selector1, selector2)
+```
+///
 
 ## `:host-context()`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:host-context}
 
 Selects the element hosting shadow tree, but only if one of the element's ancestors match a selector in the selector
 list.
 
-=== "Syntax"
-    ```css
-    :host-context(parent descendant)
-    ```
+/// tab | Syntax
+```css
+:host-context(parent descendant)
+```
+///
 
 ## `:hover`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:hover}
 
 Selects an element when the user interacts with it by hovering over it with a pointing device.
 
-=== "Syntax"
-    ```css
-    :hover
-    ```
+/// tab | Syntax
+```css
+:hover
+```
+///
 
 ## `:local-link`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:local-link}
 
 Selects link (every `#!html <a>`, `#!html <link>`, and `#!html <area>` element with an `href` attribute) elements whose
 absolute URL matches the element’s own document URL.
 
-=== "Syntax"
-    ```css
-    :local-link
-    ```
+/// tab | Syntax
+```css
+:local-link
+```
+///
 
 ## `:past`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:past}
 
 Selects an element that is defined to occur entirely prior to a `:current` element.
 
-=== "Syntax"
-    ```css
-    :past
-    ```
+/// tab | Syntax
+```css
+:past
+```
+///
 
 ## `:paused`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:paused}
 
 Selects an element that is capable of being played or paused (such as an audio, video, or similar resource) and is
 currently "paused".
 
-=== "Syntax"
-    ```css
-    :paused
-    ```
+/// tab | Syntax
+```css
+:paused
+```
+///
 
 ## `:playing`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:playing}
 
 Selects an element that is capable of being played or paused (such as an audio, video, or similar resource) and is
 currently "playing".
 
-=== "Syntax"
-    ```css
-    :playing
-    ```
+/// tab | Syntax
+```css
+:playing
+```
+///
 
 ## `:target`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:target}
 
 Selects a unique element (the target element) with an id matching the URL's fragment.
 
-=== "Syntax"
-    ```css
-    :target
-    ```
+/// tab | Syntax
+```css
+:target
+```
+///
 
 ## `:target-within`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:target-within}
 
 Selects a unique element with an id matching the URL's fragment or an element which contains the element.
 
-=== "Syntax"
-    ```css
-    :target-within
-    ```
+/// tab | Syntax
+```css
+:target-within
+```
+///
 
 ## `:user-invalid`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon}:material-flask:{: title="Experimental" data-md-color-primary="purple" .icon} {:#:user-invalid}
 
 Selects an element with incorrect input, but only after the user has significantly interacted with it.
 
-=== "Syntax"
-    ```css
-    :user-invalid
-    ```
+/// tab | Syntax
+```css
+:user-invalid
+```
+///
 
 ## `:visited`:material-language-html5:{: title="HTML" data-md-color-primary="orange" .icon} {:#:visited}
 
 Selects links that have already been visited.
 
-=== "Syntax"
-    ```css
-    :visited
-    ```
+/// tab | Syntax
+```css
+:visited
+```
+///
 
 --8<--
 selector_styles.md
diff --git a/mkdocs.yml b/mkdocs.yml
index 90a9e56..c944dfd 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -56,12 +56,10 @@ markdown_extensions:
   - markdown.extensions.toc:
       slugify: !!python/object/apply:pymdownx.slugs.slugify {kwds: {case: lower}}
       permalink: ""
-  - markdown.extensions.admonition:
   - markdown.extensions.smarty:
       smart_quotes: false
   - pymdownx.betterem:
   - markdown.extensions.attr_list:
-  - markdown.extensions.def_list:
   - markdown.extensions.tables:
   - markdown.extensions.abbr:
   - markdown.extensions.md_in_html:
@@ -102,10 +100,28 @@ markdown_extensions:
       - refs.md
   - pymdownx.keys:
       separator: "\uff0b"
-  - pymdownx.details:
-  - pymdownx.tabbed:
-      alternate_style: true
   - pymdownx.saneheaders:
+  - pymdownx.blocks.admonition:
+      types:
+      - new
+      - settings
+      - note
+      - abstract
+      - info
+      - tip
+      - success
+      - question
+      - warning
+      - failure
+      - danger
+      - bug
+      - example
+      - quote
+  - pymdownx.blocks.details:
+  - pymdownx.blocks.html:
+  - pymdownx.blocks.definition:
+  - pymdownx.blocks.tab:
+      alternate_style: True
 
 extra:
   social: