{"id":266,"date":"2022-05-16T13:18:52","date_gmt":"2022-05-16T13:18:52","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=266"},"modified":"2023-03-26T14:06:13","modified_gmt":"2023-03-26T14:06:13","slug":"css-id-selectors","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-id-selectors\/","title":{"rendered":"CSS ID Selectors"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS id selectors<\/strong><\/p>\n\n\n\n<p>As specified earlier, we have to specify the selector, while we are writing the set of rules. It is one of the important things while writing CSS. One such selector is the id selector. The name clearly says that while we define the set of rules, we just mention the id of the element(with the # sign), as the selector. This is called an id selector.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS class and id selectors | Lecture 8 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/PNfrPT4PDAU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Giving the id selector just means that we are mentioning the id of the element, which has been given to it, in the HTML file. Note that the id of the element has to be unique.<\/p>\n\n\n\n<p>To style the element with an id, you just have to write a pound sign(#) and then the name of the id of the tag you want to style (as can be seen in the below example).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"229\" height=\"83\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/CSS-id-selectors.jpg\" alt=\"CSS id selectors\" class=\"wp-image-267\"\/><\/figure>\n<\/div>\n\n\n<p>Remember that id is unique and hence it is supposed not to be repeated for any other element on the page. However, you can use a different id for some different elements, but avoid using the same id&#8217;s for different elements.<\/p>\n\n\n\n<p>The below example demonstrates how you can do that &#8211;<\/p>\n\n\n\n<p>This code can be written either in internal CSS or external CSS. Here, the id is selected using the hash sign, and the main is the name of the id(or you can say the main is the id), and within the curly brackets, there are some properties that are being applied to the element associated with that id.<\/p>\n\n\n\n<p>Now, let&#8217;s have a look at an example, which explains the id selector &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"822\" height=\"327\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors.jpg\" alt=\"\" class=\"wp-image-1302\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors.jpg 822w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-300x119.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-768x306.jpg 768w\" sizes=\"auto, (max-width: 822px) 100vw, 822px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, in the above example, we just have 2 divs, and one div is with the main id. Also, we have written the CSS (internal CSS), in which, we have specified that we want to apply the mentioned set of rules, for the element with the main id.(refer to the above example for observing how we write it).<\/p>\n\n\n\n<p>If you have a look at the output, we can find that the div with the main id is going to be styled, and not another one. Let&#8217;s have a look at the output of the above code &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"161\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-1.jpg\" alt=\"\" class=\"wp-image-1303\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-1-300x47.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/CSS-id-selectors-1-768x121.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, only the element with the main id was given those styles, while both the elements are divs only. So, we can make use of the id selector, when we need to style some elements which are having some specific id. Remember that, we have to use the # sign, to mention the id of the element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS id selectors As specified earlier, we have to specify the selector, while we are writing the set of rules. It is one of the important things while writing CSS. One such selector is the id selector. The name clearly says that while we define the set of rules, we just mention the id of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,172,13],"class_list":{"0":"post-266","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-id-selectors","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":5584,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/266\/revisions\/5584"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}