{"id":80,"date":"2021-06-03T21:35:49","date_gmt":"2021-06-03T20:35:49","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=80"},"modified":"2021-06-10T12:08:56","modified_gmt":"2021-06-10T11:08:56","slug":"selectors-classes-and-ids","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/selectors-classes-and-ids\/","title":{"rendered":"Selectors, Classes and IDs"},"content":{"rendered":"

\"\"<\/a>The selector is the part of an CSS commands that identifies the parts of a page to be formatted.<\/p>\n

Simple Selectors<\/h1>\n

HTML tags can be specified:<\/p>\n

\r\nh1 {\r\n    font-family: 'Trebuchet MS', sans-serif;\r\n    color: orange;\r\n}\r\n<\/pre>\n
id Selectors<\/h1>\n
An HTML element can be given an id – any id can only be used once on a page:<\/p>\n
\r\n<p id="pageAuthor">Mr Thoresen<\/p>\r\n<\/pre>\n
CSS can then format that specific id:<\/p>\n
\r\n#pageAuthor {\r\n    text-align: right;\r\n    color: grey;\r\n}\r\n<\/pre>\n
Class Selectors<\/h1>\n
An HTML id can only be used once on page.
\nA class can be be used several times on the same page.<\/p>\n
\r\n<p class="caption">Photograph by Mr Thoresen<\/p>\r\n...\r\n<p class="caption">Photograph by Ms Bailey<\/p>\r\n<\/pre>\n
CSS can then format all occurrences of that class:<\/p>\n
\r\n.caption {\r\n    text-align: center;\r\n    color: grey;\r\n}\r\n<\/pre>\n
\"\"Grouping Selectors<\/h1>\n
If two or more elements will have the same formatting, the common elements can be grouped.<\/p>\n
In this example, both h1 and h2 elements wll use the Trebuchet font, but only h1 elements will have orange text:<\/p>\n
\r\nh1, h2 {\r\n    font-family: 'Trebuchet MS', sans-serif;\r\n}\r\nh1 {\r\n    color: orange;\r\n}\r\n<\/pre>\n
\"\"U\"\"<\/a>niversal Selector<\/h1>\n
The universal selector will apply styles to every<\/strong> page element.<\/p>\n
Example: Browsers use default settings for margins and padding when displaying HTML elements. To override these defaults, a universal selector (*) can be used at the top of a stylesheet to set the margin and padding of every element to 0. This will allow students to witness only the margins and paddings they actually code.<\/span><\/p>\n
 \r\n* {\r\n    padding: 0px;\r\n    margin: 0px;\r\n}<\/pre>\n
\"\"\"\"<\/a>Descendant Selectors (a Combinator)<\/h1>\n
Descendant selectors give a list of two or more selectors, separated with spaces. The formatting rules are only applied to those selectors that are inside the previous selectors.<\/p>\n
Example: This block will format only format list items<\/em> that are inside<\/strong> an unsorted list<\/em> that are<\/strong> inside a navigation block<\/em>.<\/p>\n
\r\nnav ul li {\r\n    float:left;\r\n    width:80px;\r\n    text-align:center;\r\n}\r\n<\/pre>\n
This is used on the page for horizontal navigation bars<\/a>.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
The selector is the part of an CSS commands that identifies the parts of a page to be formatted. Simple Selectors HTML tags can be specified: h1 { font-family: ‘Trebuchet MS’, sans-serif; color: orange; } id Selectors An HTML element can be given an id – any id can only be used once on a page: <p id="pageAuthor">Mr Thoresen<\/p> CSS can then format that specific id: #pageAuthor { text-align: right;<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":78,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":15,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":374,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/80\/revisions\/374"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/78"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}