CSSセレクタのおさらい

100%

CSSセレクタのおさらい

✓ Published0🌍 Public

Last edited Mar 7, 2017

Created on Mar 6, 2017

This example presents a reference guide to CSS selectors, visually organizing a Gist document into an interactive chart. It displays the document's hierarchical structure, breaking down selector types into categories such as basic selectors, attribute selectors, and pseudo-elements/classes. The visualization shows the syntax, its format, and the elements to which each selector applies, using a tree-like layout to illustrate the relationships between the top-level categories and their individual entries. The data originates from the Markdown file, with the rendering approach using a force-directed graph to position the nodes.

AI-generated description

Similar vizzes

Loading thumbnail…

html_basics

This example demonstrates basic HTML and CSS styling for text and SVG shapes, with a primary focus on the cascade and specificity of CSS selectors. The page contains two paragraphs: the first is styled with a larger font size and pink color via an ID and class selector, while the second uses a plain element selector. The visualization also includes a yellow circle drawn with an inline SVG element, using standard SVG attributes for positioning and appearance. The code relies on native web APIs—HTML, CSS, and SVG—without external JavaScript libraries, showcasing fundamental front-end techniques.

BBillyBHWong

66% match

Loading thumbnail…

CSS Colors

This example displays the text “CSS Colors” in a massive, centered font using CSS styling on a minimal HTML page. It fetches a CSV file of named color values from a GitHub gist via the Fetch API, then logs the raw text response to the browser console. The visualization is a simple demonstration of loading external data with JavaScript and rendering styled HTML, without any data-binding or charting library. The page relies entirely on native browser APIs and CSS for its presentation.

KKoundinya

64% match

Loading thumbnail…

Investigation of CSS Precedence

This example presents a static HTML page that visualizes the precedence of CSS style rules. It shows how different selectors and inline styles determine the final color of heading elements; an `<h1>` turns red from a stylesheet rule, while two `<h2>` elements become blue and green from their respective inline `style` attributes. The page relies on raw HTML, embedded CSS, and the browser’s default styling engine, with no JavaScript libraries. The rendering approach is direct DOM display, illustrating cascade behavior without interactivity.

KKerotyzzzmo

63% match

Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith

62% match

Loading thumbnail…

CSS Colour List

This example displays a list of all named CSS colours, rendered as a large, centered title on a plain white page. The visualization is minimal, showing only the text “CSS Colours” without any graphical encoding of the colour values themselves. The code fetches a CSV file containing the colour names from a GitHub gist and parses it using `d3.csvParse`, but the parsed data is only logged to the console and not used for any visual output. The page uses D3 v6 for data loading, with the body styled at a font size of 13em to emphasize the title.

PPadoSensei

62% match

Loading thumbnail…

Gist 16d0e6050f60256517db942d1fe29703

This example demonstrates a technique for remotely fetching and inspecting CSS stylesheets, particularly extracting image URLs from `srcset` attributes and resolving cross-origin stylesheet rules. The code uses the Fetch API with a CORS proxy to retrieve stylesheet contents, then parses `srcset` strings with a custom regular expression to collect image candidates. It also leverages `document.styleSheets`, `cssRules`, and a temporary `<style>` element to access rule data, while caching processed elements in a `WeakSet` to avoid duplication. The visualization output is logged to the console, showing the collected stylesheet rules and image URLs from the current page.

NN0taN3rd

61% match

Loading thumbnail…

CSS Colours

This example visualizes the 148 named CSS colours by fetching and parsing a CSV file of colour names and values from a remote gist. It uses `fetch` to retrieve the data and `d3.csvParse` to convert the raw text into structured rows, then logs the file size, row count, and column count to the browser console. The page is a minimal HTML document that loads D3 v7 from a CDN and embeds all logic in a script tag, demonstrating a straightforward data-loading pipeline without any graphical rendering.

EEd Hutchinson

61% match

Loading thumbnail…

css named colors

This example demonstrates the full set of CSS named colors by fetching a CSV file from a GitHub gist and logging its contents to the console. The page uses the Fetch API’s `fetchText` function to asynchronously retrieve the raw CSV data, then calls `.then()` to output the text. While the code currently only prints the data, it sets up a foundation for visualizing the colors, though no rendering or charting library is yet applied. The example relies on standard web APIs and plain JavaScript, with no external visualization framework.

Eerin

61% match