Jens Grochtdreis jensgro

## css-selectors.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                jensgro
                / css-selectors.md
            
            
              Created
              October 6, 2023 21:45
                — forked from magicznyleszek/css-selectors.md
            
              
                CSS Selectors Cheatsheet
              
          
    CSS Selectors Cheatsheet

Hi! If you see an error or something is missing (like :focus-within for few years :P) please let me know ❤️
Element selectors

Element -- selects all h2 elements on the page
h2 {

  
## clickmeifyoucan.html
<html>
  <head>
    <title>Click me if you can</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

## style.css
.logo_background {
    background-image: url('../img/logo@1x.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 40px; /* size of the logo image @ 1x */
}
@media /* only for retina displays */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),

## .eleventy.js
//...
eleventyConfig
        .addFilter('yearTags', posts => {
            const yearsList = posts.map(p => p.data.date.getFullYear())
            const yearsCount = {}
            yearsList.forEach(y => {
                if (!yearsCount[y]) yearsCount[y] = 1
                else yearsCount[y]++
            });
            return Object.keys(yearsCount)

## _propmap.scss
/**
 * Converts a SASS map of css property names and values into CSS output.
 * Properties named `description` will have their value inserted as comments.
 *
 * Nested maps will be processed recursively.
 *
 * @param  {map} $map the map of properties to output
 */
@mixin map-to-props($map){
	@if type-of($map) == map {

## slide.js
// In order for these functions to work, the target element needs a transition CSS property to be set.

function slideUp(element, callback) {
    element.style.overflow = 'hidden';
    element.style.height = element.clientHeight + 'px';

    setTimeout(() => {
        element.style.height = 0;
    }, 0);

## grid-reloaded.scss
// These are the mixins

@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
    $row-gap: if($row-gap == null, $column-gap, $row-gap);

    display: grid;
    grid-template-columns: repeat($column-count, 1fr);
    grid-gap: $row-gap $column-gap;
    gap: $row-gap $column-gap;
}

## grid.scss
$columns: 12;
$gap: 30px;
$breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 960px,
    lg: 1170px,
    xl: 1280px
);

## sort-tags.js
eleventyConfig.addFilter("taglist", function(collection) {
    const tags = [];
    collection.forEach(post => {
        tags.push(...post.data.tags);
    });
    const sorted = [...new Set(tags)].sort((a, b) => a.localeCompare(b));
    return sorted;
});

## svg-pie-charts.html
<!--
Neat way to render responsive pie charts in HTML with SVGs and CSS from https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
-->

<style>
  	svg.piechart {
    transform: rotate(-90deg);
    background: #B0233B;
    border-radius: 50%;
	}
	<html>
	<head>
	<title>Click me if you can</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	html, body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.logo_background {
	background-image: url('../img/logo@1x.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 40px; /* size of the logo image @ 1x */
	}
	@media /* only for retina displays */
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min--moz-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2),
	//...
	eleventyConfig
	.addFilter('yearTags', posts => {
	const yearsList = posts.map(p => p.data.date.getFullYear())
	const yearsCount = {}
	yearsList.forEach(y => {
	if (!yearsCount[y]) yearsCount[y] = 1
	else yearsCount[y]++
	});
	return Object.keys(yearsCount)
	/**
	* Converts a SASS map of css property names and values into CSS output.
	* Properties named `description` will have their value inserted as comments.
	*
	* Nested maps will be processed recursively.
	*
	* @param {map} $map the map of properties to output
	*/
	@mixin map-to-props($map){
	@if type-of($map) == map {
	// In order for these functions to work, the target element needs a transition CSS property to be set.

	function slideUp(element, callback) {
	element.style.overflow = 'hidden';
	element.style.height = element.clientHeight + 'px';

	setTimeout(() => {
	element.style.height = 0;
	}, 0);
	// These are the mixins

	@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
	$row-gap: if($row-gap == null, $column-gap, $row-gap);

	display: grid;
	grid-template-columns: repeat($column-count, 1fr);
	grid-gap: $row-gap $column-gap;
	gap: $row-gap $column-gap;
	}
	$columns: 12;
	$gap: 30px;
	$breakpoints: (
	xs: 480px,
	sm: 768px,
	md: 960px,
	lg: 1170px,
	xl: 1280px
	);
	eleventyConfig.addFilter("taglist", function(collection) {
	const tags = [];
	collection.forEach(post => {
	tags.push(...post.data.tags);
	});
	const sorted = [...new Set(tags)].sort((a, b) => a.localeCompare(b));
	return sorted;
	});
	<!--
	Neat way to render responsive pie charts in HTML with SVGs and CSS from https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
	-->

	<style>
	svg.piechart {
	transform: rotate(-90deg);
	background: #B0233B;
	border-radius: 50%;
	}