2a:null 2b:["$","title",null,{"children":"CSS Basics and Selectors | Steve Oney | Observable"}] 30:T6ce,md` ## CSS Selectors CSS selectors are the part of a CSS rule set that selects the content in the HTML document you want to style. ## Basic CSS Selectors ### 1. CSS Element Selector The element selector selects HTML elements like <h1>. **Example** \`\`\`CSS

Hello World!

\`\`\` ### 2. CSS ID Selector Note: You can name the id whatever you want - just make sure your can find it. The id of an element is unique inside an HTML page, so don't set two elements with the same id.
Id selectos uses the id attribute to select a specific element. Select an element with id can be achieve by writing a (#) + element's id. Example: \`\`\`HTML
Paragraph with the id selector

This paragraph is a default paragraph without style.
\`\`\` ### 3. CSS Class Selector The class selector uses specific class attribute to select HTML elements. The class selsctor selects the element with a period(.) + the class name. Note: The difference between an id selector and a class selector is that class selector can be use to identify more than one element. Example: \`\`\`HTML
Paragraph with class selector

This paragraph is a default paragraph without style.

Another paragraph with the same class selector
\`\`\` Result: `31:[{"id":"17322b1b9b53ba6d0824f5e98193a50bf44058afe54f3624c6a938f71c22ac8d68daa4120676864bb39dfab857abe90d948cdc640a888bc3d33e63ce721ca331","href":"https://static.observableusercontent.com/files/17322b1b9b53ba6d0824f5e98193a50bf44058afe54f3624c6a938f71c22ac8d68daa4120676864bb39dfab857abe90d948cdc640a888bc3d33e63ce721ca331","name":"image@4.png","type":"image/png","lastModified":1609959437556.649,"size":35889},{"id":"9f689515c1e74dfa23c5c930df53e4947fc0d636c1152500bc74215ae078e46c9fa129f0316db0d68072dcb863cc4d64344dcc96419d9250fbbc63b1a436ff21","href":"https://static.observableusercontent.com/files/9f689515c1e74dfa23c5c930df53e4947fc0d636c1152500bc74215ae078e46c9fa129f0316db0d68072dcb863cc4d64344dcc96419d9250fbbc63b1a436ff21","name":"image@3.png","type":"image/png","lastModified":1609959437556.649,"size":27756},{"id":"7e3e7b40e69a263cf4c3ef74422038cc963cce1bb3ecbc17881ddf1885009e44d6bcd97a8d58a948ff3f577a8ecd9504007f5a4b54fab883f92a5e2b6745aef0","href":"https://static.observableusercontent.com/files/7e3e7b40e69a263cf4c3ef74422038cc963cce1bb3ecbc17881ddf1885009e44d6bcd97a8d58a948ff3f577a8ecd9504007f5a4b54fab883f92a5e2b6745aef0","name":"image@2.png","type":"image/png","lastModified":1609959437556.649,"size":23231},{"id":"a9fd1f80f34928be436d1ae6a5186ea23aa1344915a0b4d74e76214b5b3817886ad94fdedc7ffbb3b513897351935e2764612a35dee74b7e5b7341f3320bd1e2","href":"https://static.observableusercontent.com/files/a9fd1f80f34928be436d1ae6a5186ea23aa1344915a0b4d74e76214b5b3817886ad94fdedc7ffbb3b513897351935e2764612a35dee74b7e5b7341f3320bd1e2","name":"image@1.png","type":"image/png","lastModified":1609959437556.649,"size":40234},{"id":"87532c328b37ba4b4761aa401f5a7100d34b884ed7444d669ca387de0ff9e5f1ce3c30623715edcaa4f6d178e983700348d0436135a487b9c5cea92a9039987c","href":"https://static.observableusercontent.com/files/87532c328b37ba4b4761aa401f5a7100d34b884ed7444d669ca387de0ff9e5f1ce3c30623715edcaa4f6d178e983700348d0436135a487b9c5cea92a9039987c","name":"image.png","type":"image/png","lastModified":1609959437556.649,"size":33140},{"id":"8240b8b44c51e10c7baef0329a8837073774854c84505a8303cff20a589fa96709bfff22de4986c35ff635e2e9e0510d1f5f07cd1fcac0c72ffcd784d358046b","href":"https://static.observableusercontent.com/files/8240b8b44c51e10c7baef0329a8837073774854c84505a8303cff20a589fa96709bfff22de4986c35ff635e2e9e0510d1f5f07cd1fcac0c72ffcd784d358046b","name":"Custom Size – 1-2x@1.png","type":"image/png","lastModified":1609959437556.649,"size":48833}] 2e:{"id":"96c22e9548a9265b","slug":"css-basics-and-selectors","title":"CSS Basics and Selectors","thumbnail":"6d40707395a4bba80b9c600f523a0c4a46b67dbed38296f026bd72c4bfd3a1b2","access_level":"public","create_time":"$D2020-12-30T19:47:30.941Z","update_time":"$D2023-10-02T17:43:32.401Z","view_time":null,"first_public_time":"$D2020-12-30T19:47:32.528Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":26,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"CSS Basics and Selectors","cells":[{"id":0,"value":"md`# CSS Basics and Selectors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`\n## CSS Syntax \n
\n \n
\n\nDeclaration
\nEach declaration contains a property and a value, separating by a colon. The declarations are a core function of CSS.\n\nDeclaration Block
\nThe declaration block can contain one or more declarations, separating by semicolons. The declaration bloacks are surronded by curly braces with selectors in the front.\n\nSelector
\nThe selector in an CSS style sheet points to the HTML element that needs to be styled.\n\nMore information on CSS syntax can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`\n## Combining Selectors\nCombining seletor is used to select multiple elements in a single style block.\n\n### 1. <element1> , <element2> \n Each selector is separate by a comma when combining them. Both <element1> AND all <element2> will be styled.\n\n\nExample:\n\n\\`\\`\\`HTML\n\n\n\n\n\n\n

Hello World!

Are you enjoying this?

It's about to get complicate.

\n\n\n\n\\`\\`\\`\n\n**Result:**\n\n

\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n### 2. <element1> <element2> \n\nEach selector is separated by a **space** when specifying a parent relationship. All <element2> inside of <element1> will be selected and styled.\n\n**Example:**\n\n\n\\`\\`\\`HTML\n\n\n\n\n\n\n

I'm the selected paragraph.

I'm not inside the div so Im not selected

\n\n\n\n\\`\\`\\`\n\n**Result:**\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n### 3. <element1> > <element2> \nEach selector is separate by a **>** when specifying a **direct** parent relationship. Select and style every <element2> element where the parent is <element1>.
\nImportant: Only elements that are direct child of the parent will be selected.\n\n\n**Example:**\n\n\n\\`\\`\\`HTML\n\n\n\n\n\n\n\n

I'm a direct child of div so I'm selected.

\n\n

I'm not a direct child of div so I won't be styled.

\n\n\n\n\\`\\`\\`\n\n**Result:**\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\nA reference to the list of CSS selectors and CSS combine selectors can be found [here](https://www.w3schools.com/cssref/css_selectors.asp).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"