CSS Tabs

{"publication":{"id":"6284ec867b02ca162edac1bd","posts":{"edges":[{"node":{"id":"63fb90e039102b4ed4bc63b0","title":"Using the :has selector to display full with of a container","slug":"using-the-has-selector-to-display-full-with-of-a-container","publishDate":"2023-02-26T17:03:28.411Z","cuid":"cleln41p7000809l782gtask0","url":"https://css.co.in/using-the-has-selector-to-display-full-with-of-a-container","subtitle":"The :has selector can be used to make a 100% iframe's container to be also 100%","brief":"Finally, today I had a use-case for the :has selector which was first supported by Safari as reported by Jen Simmons.\nI have this in my base.html :\n

\n {% block content %}{% endblock %}\n

\n\nwhich has the ...","readTimeInMinutes":2,"views":48,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1677430956465/7544d1eb-0c11-4ff4-be5c-4d3888bf4f06.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjNmYjkwZTAzOTEwMmI0ZWQ0YmM2M2IwXzIwMjMtMDItMjZUMTc6MDM6MjguNDExWg==","__typename":"PostEdge"},{"node":{"id":"63807f79d6b5ef236e5893aa","title":"first-of-type","slug":"first-of-type","publishDate":"2022-11-25T08:40:25.440Z","cuid":"claw96wdc000408l29dd45b45","url":"https://css.co.in/first-of-type","subtitle":"Catch the first element type that's a child of a parent element","brief":"Let's say we wanted to target DOM Elements of a particular type inside a parent DOM container say a section.\n

\n\n

\n Inner Content not in an inner enclosed DIV or DOM Element.\n

Inner Content 1 in 1st plan...","readTimeInMinutes":2,"views":80,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":null,"__typename":"Post"},"cursor":"NjM4MDdmNzlkNmI1ZWYyMzZlNTg5M2FhXzIwMjItMTEtMjVUMDg6NDA6MjUuNDQwWg==","__typename":"PostEdge"},{"node":{"id":"62cc6e920ba13ab923f68ce0","title":"Text Input Validation & Error without JavaScript","slug":"text-input-validation-and-error-without-javascript","publishDate":"2022-07-11T18:40:18.630Z","cuid":"cl5h3anme0132t4nv7ys28q85","url":"https://css.co.in/text-input-validation-and-error-without-javascript","subtitle":"Use HTML5 properties and advanced CSS attributes for validation","brief":"Vanilla CSS:\ninput.nameValidation + label::after\n{\n content: \"Only alphabets and quotes allowed\";\n color: orange;\n}\ninput.nameValidation:focus:required:invalid:not(:placeholder-shown)\n{\n border: 1px solid red;\n animation: shake 300ms;\n}\n...","readTimeInMinutes":2,"views":74,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657612346187/s80s-hpMD.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjJjYzZlOTIwYmExM2FiOTIzZjY4Y2UwXzIwMjItMDctMTFUMTg6NDA6MTguNjMwWg==","__typename":"PostEdge"},{"node":{"id":"6287159d8b33cc3f1f48b3ca","title":"Mega Menu using CSS only","slug":"mega-menu-using-css-only","publishDate":"2021-01-09T12:51:47.000Z","cuid":"cl3dxgqsi00ta07nvbtks1v8h","url":"https://css.co.in/mega-menu-using-css-only","subtitle":"","brief":"Demo : http://s3.css.co.in/demo/mega-menu.html\nCode : https://gist.github.com/anjanesh/876b781b69fff9598fd73ffeda4b9318\nSorry for no explanation here.\n#top-menu-1 > div > a + div:hover has to be displayed as block too.\nFor people who know CSS, I thin...","readTimeInMinutes":1,"views":106,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1653020058287/UbtEMZJII.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI4NzE1OWQ4YjMzY2MzZjFmNDhiM2NhXzIwMjEtMDEtMDlUMTI6NTE6NDcuMDAwWg==","__typename":"PostEdge"},{"node":{"id":"628715a87b02ca162edafd2d","title":"Using ::marker to display content before content","slug":"using-marker-to-display-content-before-content","publishDate":"2020-11-01T06:39:48.000Z","cuid":"cl3dxgz510c2zx2nvb5hkdwep","url":"https://css.co.in/using-marker-to-display-content-before-content","subtitle":null,"brief":"Ever wanted a piece of content before the content ?\nWell …. there is ::before which is what it is used for.\nBut there is another selector called ::marker which is used for displaying content before a list item.\nIt is possible to display a non-list it...","readTimeInMinutes":2,"views":42,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1653020069582/YyUl0lnV2.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjI4NzE1YTg3YjAyY2ExNjJlZGFmZDJkXzIwMjAtMTEtMDFUMDY6Mzk6NDguMDAwWg==","__typename":"PostEdge"},{"node":{"id":"628715af7b02ca162edafd32","title":"Using the data URI scheme to reduce an HTTP request","slug":"using-the-data-uri-scheme-to-reduce-an-http-request","publishDate":"2011-01-01T04:08:50.000Z","cuid":"cl3dxh47n0c34x2nv9dh03q9s","url":"https://css.co.in/using-the-data-uri-scheme-to-reduce-an-http-request","subtitle":null,"brief":"Ever wanted to include a 1px wide/high background image that repeats (one way), to your existing sprite image just to reduce that one HTTP request, even though it may not have that great an impact on speed ?\nSince the image repeats itself (repeat-x o...","readTimeInMinutes":1,"views":48,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":null,"__typename":"Post"},"cursor":"NjI4NzE1YWY3YjAyY2ExNjJlZGFmZDMyXzIwMTEtMDEtMDFUMDQ6MDg6NTAuMDAwWg==","__typename":"PostEdge"},{"node":{"id":"628715b57b02ca162edafd37","title":"FireFox Specific CSS","slug":"firefox-specific-css","publishDate":"2010-12-04T08:08:17.000Z","cuid":"cl3dxh8y90c35x2nvhh4h05d2","url":"https://css.co.in/firefox-specific-css","subtitle":null,"brief":"Though the chances of wanting this is pretty slim, but if you want to target a set of CSS attributes just for FireFox instead of using JavaScript to alter the styles, its possible.Though most -moz- properties get deprecated & later removed, when the ...","readTimeInMinutes":1,"views":56,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":null,"__typename":"Post"},"cursor":"NjI4NzE1YjU3YjAyY2ExNjJlZGFmZDM3XzIwMTAtMTItMDRUMDg6MDg6MTcuMDAwWg==","__typename":"PostEdge"},{"node":{"id":"628715bd7b02ca162edafd3c","title":"Adjusting styles based on a language","slug":"adjusting-styles-based-on-a-language","publishDate":"2010-11-26T16:40:14.000Z","cuid":"cl3dxhexj0c3bx2nv81yaelpr","url":"https://css.co.in/adjusting-styles-based-on-a-language","subtitle":null,"brief":"Traditionally, language HTML files would be stored separately and load language specific CSS files.But now we just store the language strings separately and programmatically print the language strings within the same HTML file.Very often I find mysel...","readTimeInMinutes":1,"views":46,"author":{"id":"5e5e8afd205a551d167f94ef","username":"anjanesh","name":"Anjanesh Lekshminarayanan","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1603373680145/YjrKA5Kio.jpeg","followersCount":8,"__typename":"User"},"coverImage":null,"__typename":"Post"},"cursor":"NjI4NzE1YmQ3YjAyY2ExNjJlZGFmZDNjXzIwMTAtMTEtMjZUMTY6NDA6MTQuMDAwWg==","__typename":"PostEdge"},{"node":{"id":"628715c77b02ca162edafd43","title":"CSS only Tabs using :target","slug":"css-only-tabs-using-target","publishDate":"2010-10-15T12:30:00.000Z","cuid":"cl3dxhn5h0c3gx2nvdjrngmom","url":"https://css.co.in/css-only-tabs-using-target","subtitle":null,"brief":"Its highly unlikely that tabs using only CSS would replace JavaScript based ones.\n\n\n\n\n\nCSS Tabs\n

Hello World