{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/using-css-selectors-combinators/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

We will use the following HTML mark-up to illustrate the usage of three CSS selectors, known as combinators: child selector, adjacent sibling selector and general sibling selector.

\n
index.html
\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <link rel="stylesheet" href="style.css"/>\n    <title>Document</title>\n</head>\n<body>\n    <div class="web-technology">\n    <h2>FULLSTACK WEB DEVELOPMENT</h2>\n    <p>Frontend + Backend</p>\n    <ul class="tech">\n        <li>React</li>\n        <ul class="framework">\n            <li>Gtasby</li>\n            <li>Next.js</li>\n        </ul>\n        <li>MongoDB</li>\n        <li>Express</li>\n        <p>MERN stack is cool.</p>\n        <li>Node.js</li>\n    </ul>\n    <p>Want to be a fullstack developer?</p>\n</div>\n</body>\n</html>
\n
style.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  font-size: 62.5%;\n}\n\n.web-technology {\n  width: 40rem;\n  padding: 4rem;\n  margin: auto;\n}\n\nul li,\np {\n  font-size: 1.5rem;\n}
\n

The UI now looks like this:

\n

\n \n \n \n \n

\n

Child selector (>)

\n

Selects all the elements that are direct children of the specified element.

\n
.tech > li {\n  font-weight: 400;\n  color: red;\n}
\n

\n \n \n \n \n

\n

General sibling selector (~)

\n

Selects the siblings of an element even if the siblings are not directly adjacent.

\n
h2 ~ p {\n  font-weight: 600;\n  color: orange;\n}
\n

\n \n \n \n \n

\n","frontmatter":{"title":"Using CSS Selectors - Combinators.","date":"2021-06-13"}}},"pageContext":{"slug":"/using-css-selectors-combinators/","prev":{"fields":{"slug":"/remove-duplicate-values-in-an-array-using-set-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/graphql-concepts-explained-query/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}