{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/css-specificity-calculator/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"CSS specificity calculator\",\n  \"cover\": \"\",\n  \"date\": \"2020-02-24\",\n  \"type\": [\"annoucement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `If an element is targeted by multiple selectors, browser use the specificity of the selector to determine\nwhich styling to apply. Each selector has a specificity that is determined by what you use in that selector:\nelements, ID's, classes etc. This specificity is split up in different levels.`), mdx(\"p\", null, `This CSS Selector specificity can be confusing if you're just starting out, or if you're working with a particularly\ncomplex set of styles. Quickly figuring out which CSS selector has the highest specificity helps a lot in finding out\nwhat's going on and getting your bearing on the styling.`), mdx(\"p\", null, `To help with this, Polypane now has an online CSS specificity calculator:`), mdx(\"h3\", {\n    \"id\": \"online-css-selector-specificity-calculator\"\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"/css-specificity-calculator/\"\n  }), `Online CSS selector specificity calculator`)), mdx(\"p\", null, `The Polypane CSS specificity calculator not only has the specificity, but it also tells you how it made that score, and\nwhich parts of your selector fall in what category. There's also a short list of gotcha's you might run into when dealing with CSS Specificity.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"tableOfContents":{"items":[{"url":"#online-css-selector-specificity-calculator","title":"Online CSS selector specificity calculator"}]},"excerpt":"If an element is targeted by multiple selectors, browser use the specificity of the selector to determine\nwhich styling to apply. Each selector has a…","frontmatter":{"title":"CSS specificity calculator","cover":"","date":"2020-02-24","updated":null},"fields":{"slug":"/blog/css-specificity-calculator/","date":"2020-02-23T23:00:00.000Z","ogFileName":"css-specificity-calculator"}}},"pageContext":{"slug":"/blog/css-specificity-calculator/"}},"staticQueryHashes":["4164364741","425175329"]}