\n\u003C/div>\n",{"id":39,"type":20,"data":40},"pxJs_cn7na",{"text":41},"Next, let's add some basic CSS styles just to style the image.",{"id":43,"type":35,"data":44},"KQNe2ltz5S",{"code":45},".pulse {\n position: relative; /* Will be needed in the future for animation */\n text-align: center; \n padding: 20px;\n border-radius: 50%;\n background: #EF3C50;\n width: 80px;\n height: 80px;\n}",{"id":47,"type":20,"data":48},"aS80byzgUJ",{"text":49},"Next, we will style \u003Cb>::before\u003C/b> pseudo-element. This element will be animated. Basically, this element will be our \"effect\". During animation, we will simply change it's size and opacity.",{"id":51,"type":35,"data":52},"oyme-hXbxO",{"code":53},".pulse::before {\n content: ''; /* We need this to display pseudo-element */\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":55,"type":20,"data":56},"noGLd10Hvx",{"text":57},"That's all. If you run this code right now, you will see the animation but only with one animating element. Let's make animation looks better.",{"id":59,"type":25,"data":60},"Gy6RBn3_jt",{"text":61,"level":28},"CSS pulse animation: final code",{"id":63,"type":20,"data":64},"psZdqSvc7a",{"text":65},"To make animation better, let's do the same thing for ::after, as we did it for ::before. Also, we will add animation delay for one of this pseudo-element.",{"id":67,"type":35,"data":68},"KpMgFAhVv_",{"code":69},".pulse::after,\n.pulse::before {\n content: '';\n position: absolute;\n border: 2px solid #EF3C50;\n opacity: 0;\n left: -20px;\n right: -20px;\n top: -20px;\n bottom: -20px;\n border-radius: 50%;\n animation: pulse 2.5s linear infinite; /* You can change properties here to tune animation */\n}\n\n.pulse::after {\n animation-delay: 1.25s;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1.2);\n opacity: 0;\n }\n}",{"id":71,"type":20,"data":72},"IjJySBZb8J",{"text":73},"Thanks for reading! Hope this tutorial was helpful for you.",{"id":75,"type":76,"data":77},"9gQ25iM2pa","embed",{"service":78,"source":79,"embed":80,"width":81,"height":82,"caption":83},"codepen","https://codepen.io/Nazarii-Semeniuk/pen/oNOyQGw","https://codepen.io/Nazarii-Semeniuk/embed/oNOyQGw?height=300&theme-id=0&default-tab=css,result&embed-version=2",600,300,"My code for pure css pulse animation on codepen","2.29.1","/uploads/posts/2024/04/12/pure-css-pusle-animation.jpg","tutorial",256,[89],{"_id":90,"name":91,"slug":92,"description":93,"types":94,"createdAt":95,"__v":96},"6616e1f81cb6b57cf765f8a3","CSS","css","Tutorials about CSS. Here you will find posts about how to make cool things using mostly pure CSS and HTML, and yeah, even now it can do more than you're thinking.",[86],1712775437720,0,true,1712603104173,3,{"_id":101,"userId":9,"title":102,"slug":103,"description":104,"content":105,"thumbnail":147,"type":86,"views":148,"tags":149,"published":97,"createdAt":152,"updatedAt":152,"timeToRead":99,"__v":96},"661c06c799d47d3548ebf178","CSS animated gradient for background","css-animated-gradient-for-background","In this short tutorial, I'll show you how to create an animated gradient background using pure CSS. You can apply this CSS animated gradient for any element on your website.",{"html":106,"json":107},"\u003Cp>Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.\u003C/p>\u003Ch2>Creating an animated gradient with CSS\u003C/h2>\u003Cp>Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.\u003C/p>\u003Cpre>\u003Ccode><div class=\"gradient\"></div>\u003C/code>\u003C/pre>\u003Cp>Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.\u003C/p>\u003Cpre>\u003Ccode>.gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}\u003C/code>\u003C/pre>\u003Cp>CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.\u003C/p>\u003Cp>Thanks for reading! Hope this tutorial was helpful for you.\u003C/p>\u003Cdiv class=\"codepen-embed\">\n \u003Ciframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS animated gradient background on CodePen\" src=\"https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=500&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\u003C/iframe>\n \u003C/div>",{"time":108,"blocks":109,"version":84},1713113968861,[110,114,118,122,126,130,134,138,141],{"id":111,"type":20,"data":112},"6RZ-1WL730",{"text":113},"Hi everyone, welcome to my website. In this short tutorial, I'll show you how to create an animated gradient with CSS for background. If you want just copy and paste necessary code, you can do it directly from this website, or go to \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX\" target=\"_blank\" rel=\"nofollow\">CodePen\u003C/a> that I created, and copy, update or play with code.",{"id":115,"type":25,"data":116},"lvdbDlVZjJ",{"text":117,"level":28},"Creating an animated gradient with CSS",{"id":119,"type":20,"data":120},"7Q1XhefDsK",{"text":121},"Firstly, let's create an HTML element that will have an animated CSS gradient in the future. I'll create a \u003Ci>div\u003C/i> tag with \u003Ci>'gradient' \u003C/i>class, but you can apply this technique for any element on your website.",{"id":123,"type":35,"data":124},"YJCzVHV0_f",{"code":125},"\u003Cdiv class=\"gradient\">\u003C/div>",{"id":127,"type":20,"data":128},"ch_RRlXBuS",{"text":129},"Now let's deal with CSS part. The main idea behind this way of creating animated CSS gradient, is to create a bigger background than the element is. In my case, gradient will have a size of 400% of element. And then we will add animation, that will be moving this gradient through the element. Because of this moving, we will achieve gradient animation.",{"id":131,"type":35,"data":132},"kNwqSeA1dA",{"code":133},".gradient {\n height: 450px; /* Here you can use any size for element */\n width: 100%; /* Here you can use any size for element */\n background: linear-gradient(45deg, #FF512F 0%, #DD2476 100%);\n animation: gradient 2s infinite linear; /* 2s - speed of animation */\n background-size: 400%; /* You can play with this value to change intensity of the effect */\n}\n\n@keyframes gradient {\n 0% {\n background-position: 80% 0%;\n }\n 50% {\n background-position: 20% 100%;\n }\n 100% {\n background-position: 80% 0%;\n }\n}",{"id":135,"type":20,"data":136},"PC3Qyi1J58",{"text":137},"CSS code for animated gradient is very simple. The main difficulty for me personally, is to create nice looking gradient, pick right colors to make it looks fine. But you can make your life easier using CSS gradients generator, such \u003Ca href=\"https://cssgradient.io/\" target=\"_blank\" rel=\"nofollow\">as this one\u003C/a>.",{"id":139,"type":20,"data":140},"ZryTrYz3CQ",{"text":73},{"id":142,"type":76,"data":143},"IS3tDwzr7-",{"service":78,"source":144,"embed":145,"width":81,"height":82,"caption":146},"https://codepen.io/Nazarii-Semeniuk/pen/JjVBLNX","https://codepen.io/Nazarii-Semeniuk/embed/JjVBLNX?height=300&theme-id=0&default-tab=css,result&embed-version=2","CSS animated gradient background on CodePen","/uploads/posts/2024/04/14/css-animated-gradient-for-background.jpg",45,[150],{"_id":90,"name":91,"slug":92,"description":93,"types":151,"createdAt":95,"__v":96},[86],1712905880750,{"_id":154,"userId":9,"title":155,"slug":156,"description":157,"content":158,"thumbnail":204,"type":86,"views":205,"tags":206,"published":97,"createdAt":209,"updatedAt":209,"timeToRead":28,"__v":96},"66215d9194008990ab7058c3","Parallax scrolling effect for background using only CSS","parallax-scrolling-effect-for-background-using-only-css","In this short article, I'll show you how to create parallax scrolling effect for background. You can apply parallax CSS effect from this instruction to any element on your website. Also, we'll not be using any libraries or JavaScript, only pure CSS and HTML.",{"html":159,"json":160},"\u003Cp>Hello everyone, welcome to my website. In this short and quick tutorial, I'll show you how to create parallax scrolling effect for background using only CSS and HTML.\u003C/p>\u003Ch2>Creating pure CSS parallax scrolling effect\u003C/h2>\u003Cp>This is a really simple technique. We will use just a specific CSS property, called \u003Ci>background-attachment\u003C/i>. Let's create simple HTML structure first. I'll just place some text over parallax background for example.\u003C/p>\u003Cpre>\u003Ccode><div class=\"parallax\">\n <h1 class=\"parallax__title\">This is parallax</h1>\n</div>\u003C/code>\u003C/pre>\u003Cp>Now, let's add some styles. I'll highlight the most important property to achieve CSS parallax effect with comment in CSS code.\u003C/p>\u003Cpre>\u003Ccode>.parallax {\n background-image: url(bg-image.jpg);\n height: 500px;\n background-attachment: fixed; /* Main property to achieve parallax scroling effect */\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n}\u003C/code>\u003C/pre>\u003Cp>That's all. You can see what this code doing in the example below.\u003C/p>\u003Ch2>Pure CSS parallax background example\u003C/h2>\u003Cp>Here is an example of CSS parallax background:\u003C/p>\u003Cdiv class=\"parallax\">\n \u003Cdiv class=\"parallax__title\">This is parallax\u003C/div>\n\u003C/div>\n\n\u003Cstyle>\n.parallax {\n background-image: url('https://nazarii-semeniuk.com/uploads/examples/pure-css-parallax-background.jpeg');\n height: 500px;\n background-attachment: fixed;\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n font-size: 48px;\n font-weight: 700;\n}\n\n@media (max-width: 800px) {\n .parallax {\n font-size: 36px;\n text-align: center;\n }\n}\n\u003C/style>\n",{"time":161,"blocks":162,"version":84},1732124145133,[163,167,171,175,179,183,187,191,195,199],{"id":164,"type":20,"data":165},"Lk2KUvnFUB",{"text":166},"Hello everyone, welcome to my website. In this short and quick tutorial, I'll show you how to create parallax scrolling effect for background using only CSS and HTML.",{"id":168,"type":25,"data":169},"5RMY2K4JIm",{"text":170,"level":28},"Creating pure CSS parallax scrolling effect",{"id":172,"type":20,"data":173},"Uhz62SZdUX",{"text":174},"This is a really simple technique. We will use just a specific CSS property, called \u003Ci>background-attachment\u003C/i>. Let's create simple HTML structure first. I'll just place some text over parallax background for example.",{"id":176,"type":35,"data":177},"UJOW_Hrd4y",{"code":178},"\u003Cdiv class=\"parallax\">\n \u003Ch1 class=\"parallax__title\">This is parallax\u003C/h1>\n\u003C/div>",{"id":180,"type":20,"data":181},"ifd1KMwlEt",{"text":182},"Now, let's add some styles. I'll highlight the most important property to achieve CSS parallax effect with comment in CSS code.",{"id":184,"type":35,"data":185},"2OJZ3wHkLz",{"code":186},".parallax {\n background-image: url(bg-image.jpg);\n height: 500px;\n background-attachment: fixed; /* Main property to achieve parallax scroling effect */\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n}",{"id":188,"type":20,"data":189},"jpDAP5IV6p",{"text":190},"That's all. You can see what this code doing in the example below.",{"id":192,"type":25,"data":193},"W4GJckwM8U",{"text":194,"level":28},"Pure CSS parallax background example",{"id":196,"type":20,"data":197},"U5oK9NFJ3b",{"text":198},"Here is an example of CSS parallax background:",{"id":200,"type":201,"data":202},"kKTNBolqfq","raw",{"html":203},"\u003Cdiv class=\"parallax\">\n \u003Cdiv class=\"parallax__title\">This is parallax\u003C/div>\n\u003C/div>\n\n\u003Cstyle>\n.parallax {\n background-image: url('https://nazarii-semeniuk.com/uploads/examples/pure-css-parallax-background.jpeg');\n height: 500px;\n background-attachment: fixed;\n display: flex;\n justify-content: center;\n color: #ffffff;\n font-size: 60px;\n align-items: center;\n position: relative;\n}\n\n.parallax::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n}\n\n.parallax__title {\n z-index: 2;\n font-size: 48px;\n font-weight: 700;\n}\n\n@media (max-width: 800px) {\n .parallax {\n font-size: 36px;\n text-align: center;\n }\n}\n\u003C/style>\n","/uploads/posts/2024/04/18/parallax-scrolling-effect-for-background-css.jpg",49,[207],{"_id":90,"name":91,"slug":92,"description":93,"types":208,"createdAt":95,"__v":96},[86],1713462447909,{"_id":211,"userId":9,"title":212,"slug":213,"description":214,"content":215,"thumbnail":711,"type":86,"views":712,"tags":713,"published":97,"createdAt":209,"updatedAt":209,"timeToRead":716,"__v":96},"6652095c94008990ab705ac4","25+ CSS selectors you should know in 2024","30-css-selectors-you-should-know","In this article, I'll show you 30 CSS selectors every frontend developer should know in 2024. From basic like element, and ID to more complex CSS selectors.",{"html":216,"json":217},"\u003Cp>Hello everyone, welcome to my website. In this article, I'll show you 25+ CSS selectors every frontend developer should know. This article will help both: newcomers to learn about new CSS selectors, which can be useful in the future and for developers with solid experience to remind about some rarely used selectors, but which can come in handy in certain situations.\u003C/p>\u003Cp>Lets deep into the world of CSS selectors, starting from more common, to more interesting.\u003C/p>\u003Ch2>CSS selector * for all elements\u003C/h2>\u003Cp>This selector is pretty common in the start of main CSS files. Usually, developers use it to set \u003Ci>box-sizing\u003C/i> property for every element on a page. In the case below, we will apply box-sizing and red color for every element on the page.\u003C/p>\u003Cpre>\u003Ccode>* {\n box-sizing: border-box;\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>But you can use it in a more complex way. For instance, in the example below we will add color property for every element in element with \u003Ci>box\u003C/i> class.\u003C/p>\u003Cpre>\u003Ccode>.box * {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS element selector (selector by type)\u003C/h2>\u003Cp>One of really easy to understand and common selectors. This selector will apply some CSS properties to an element with the given tag. For example, we will remove underline for every link and add margin left for every unordered list.\u003C/p>\u003Cpre>\u003Ccode>a {\n text-decoration: none;\n}\n\nul {\n margin-left: 20px;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS class selector\u003C/h2>\u003Cp>Class selector is also really popular and easy to use. As you can already understand from its name, it will apply some CSS rules to the elements with given class attribute.\u003C/p>\u003Cpre>\u003Ccode>.box {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS ID selector\u003C/h2>\u003Cp>CSS ID selectors might come in handy in some situations, but also have some limitations. Always remember, that \u003Cb>you can have only one element \u003C/b>on a page with given ID attribute.\u003C/p>\u003Cpre>\u003Ccode>#box {\n background: lime;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS nesting selector\u003C/h2>\u003Cp>In CSS, you can combine different selectors to make for more specific selectors. For instance, we can apply styles for any link in element with class box. \u003C/p>\u003Cpre>\u003Ccode>.box a {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Or, like in the example below, we can apply styles by nesting 3 classes. Color will apply only for element with class example, that locates in element with class box, that locates in element with class wrapper.\u003C/p>\u003Cpre>\u003Ccode>.wrapper .box .example {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Also, we can make our selector more specific, combining tag and class. Code below will apply for links with link class.\u003C/p>\u003Cpre>\u003Ccode>a.link {\n text-decoration: none;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector of next element (plus selector) +\u003C/h2>\u003Cp>Moving to more interesting selector. Here you can see selector of next element. As you can already understand from its name, it selects next element after current. Let's take a look.\u003C/p>\u003Cp>We have HTML structure like this:\u003C/p>\u003Cpre>\u003Ccode><div class=\"wrapper\">\n <h1 class=\"title\">CSS selectors are cool</h1>\n <p class=\"paragraph\">First</p>\n <p class=\"paragraph\">Second</p>\n <p class=\"paragraph\">Third</p>\n</div>\u003C/code>\u003C/pre>\u003Cp>And let's imagine that our task is to apply some styles for the first paragraph, but without any new classes. We can achieve this with this code:\u003C/p>\u003Cpre>\u003Ccode>.title + .paragraph {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>This will only work for the first paragraph. Basically, we just tell \"Select first element with class \u003Ci>paragraph\u003C/i> after element with class \u003Ci>title\u003C/i>\"\u003C/p>\u003Ch2>CSS selector for direct child >\u003C/h2>\u003Cp>This selector will select only elements, that are direct children of the element with the given selector. Let's take a look.\u003C/p>\u003Cp>We have HTML structure like this:\u003C/p>\u003Cpre>\u003Ccode><div class=\"box\">\n <div class=\"item\">Item</div>\n <div class=\"item\">Item</div>\n <div class=\"box-2\">\n <div class=\"item\">Item</div>\n </div>\n</box>\u003C/code>\u003C/pre>\u003Cp>Now, let's change color of \"item\" element, but only for the upper ones. We can achieve this with CSS selector for direct children.\u003C/p>\u003Cpre>\u003Ccode>.box > .item {\n color: lime;\n}\u003C/code>\u003C/pre>\u003Cp>In this case, lime color will apply only for first 2 \"items\".\u003C/p>\u003Ch2>CSS sibling selector (tilde) ~\u003C/h2>\u003Cp>CSS tilde selector very similar to + selector. This one will select all the elements from the same level of depth (or nesting).\u003C/p>\u003Cpre>\u003Ccode><div class=\"box\">\n <h1 class=\"title\">Title</h1>\n <div class=\"item\">Item</div>\n <div class=\"item\">Item</div>\n <div class=\"item\">Item</div>\n <div class=\"box\">\n <div class=\"item\">Item</div>\n </div>\n</div>\u003C/code>\u003C/pre>\u003Cp>The code below will apply color property only for \"items\" on the same level as title is.\u003C/p>\u003Cpre>\u003Ccode>.title ~ .item {\n color: lime;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS attribute selector [attribute]\u003C/h2>\u003Cp>Also, we can select elements that have some attributes set. We can achieve this with square brackets.\u003C/p>\u003Cpre>\u003Ccode><img src=\"...\" alt=\"...\" />\n<img src=\"...\" />\u003C/code>\u003C/pre>\u003Cp>In this case we will only select an image with \u003Cb>alt\u003C/b> attribute set.\u003C/p>\u003Cpre>\u003Ccode>[alt] {\n width: 200px;\n}\u003C/code>\u003C/pre>\u003Cp>Or we can do more specific things by combining different selector as always. Let's ensure, that we will select only images.\u003C/p>\u003Cpre>\u003Ccode>img[alt] {\n width: 200;x\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector by attribute value [attribute=\"value\"]\u003C/h2>\u003Cp>One more way to make previous selector more specific, is to set attribute value we are looking for.\u003C/p>\u003Cpre>\u003Ccode><img src=\"lion.png\" alt=\"Lion\" />\n<img src=\"penguin.png\" alt=\"Penguin\" />\n<img src=\"cat.png\" alt=\"Cat\" />\u003C/code>\u003C/pre>\u003Cp>Let's select only image with penguin.\u003C/p>\u003Cpre>\u003Ccode>img[src=\"penguin.png\"] {\n width: 200px;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector by part of attribute value [attribute*]\u003C/h2>\u003Cp>But what if we don't want to match whole attribute value? Well, for this case we can use next selector. Let's highlight links, that have \"google\" part in their URLs.\u003C/p>\u003Cpre>\u003Ccode><a href=\"https://accounts.google.com\">Google</a>\n<a href=\"https://google.com\">Google</a>\n<a href=\"https://youtube.com\">Youtube</a>\u003C/code>\u003C/pre>\u003Cp>In this case, only links that have \"google\" in their hrefs will be highlighted.\u003C/p>\u003Cpre>\u003Ccode>a[href*=\"google\"] {\n color: lime;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector by attribute value start [attribute^]\u003C/h2>\u003Cp>Previous selector is great for the most tasks, but also, we can find attributes values, that start with specific text. For instance, let's make different highlighting for safe and unsafe links.\u003C/p>\u003Cpre>\u003Ccode><a href=\"https://google.com\">Google (safe)</a>\n<a href=\"http://google.com\">Google (unsafe)</a>\u003C/code>\u003C/pre>\u003Cp>The code below will mark safe (https, secured) links with lime color, and unsafe (plain http) with red color.\u003C/p>\u003Cpre>\u003Ccode>a[href^=\"https\"] {\n color: lime;\n}\n\na[href^=\"http\"] {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector by attribute end [attribute$]\u003C/h2>\u003Cp>Also, we have a opposite selector to previous one, This selector will allow us to select elements, that have some attribute value ending. Let's make all JPG images 300 pixels width.\u003C/p>\u003Cpre>\u003Ccode><img src=\"cat.png\" alt=\"cat\" />\n<img src=\"dog.jpg\" alt=\"dog\" />\u003C/code>\u003C/pre>\u003Cp>Let's select only image, that have \u003Ci>src\u003C/i> attribute ending with '.jpg'.\u003C/p>\u003Cpre>\u003Ccode>img[src$=\".jpg\"] {\n width: 300px;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for checked inputs :checked\u003C/h2>\u003Cp>Now, let's talk about checkbox and radio inputs. There is a way of how to select only checked elements. To do this, we will be using :checked selector. This technique can be useful if you're creating custom input elements.\u003C/p>\u003Cpre>\u003Ccode><input type=\"checkbox\" name=\"example-1\" />\n<input type=\"checkbox\" checked name=\"example-2\" />\n<input type=\"checkbox\" name=\"example-3\" />\u003C/code>\u003C/pre>\u003Cp>The selector below will select only the second input. Don't worry, it'd work even if user click on this element, checked attribute was added only for visual understanding.\u003C/p>\u003Cpre>\u003Ccode>input:checked {\n // Do something with it\n}\u003C/code>\u003C/pre>\u003Ch2>CSS not selector :not(selector)\u003C/h2>\u003Cp>CSS not selector will help us to pick some elements, except other ones by condition. In the example below, we will change the color of all div elements, except those that have class \"box\".\u003C/p>\u003Cpre>\u003Ccode>div:not(.box) {\n background: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector based position of element :nth-child(n)\u003C/h2>\u003Cp>This selector will help us to find nth element in its parent.\u003C/p>\u003Cp>Let's mark every second link in an element with \"block\" class.\u003C/p>\u003Cpre>\u003Ccode>.block a:nth-child(2) {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector based on position starting from the end :nth-last-child(n)\u003C/h2>\u003Cp>Also, we have similar selector, but starting from the end.\u003C/p>\u003Cp>Let's mark every 3rd link in an element with \"block\" class, starting from the end.\u003C/p>\u003Cpre>\u003Ccode>.block a:nth-last-child(3) {\n color: lime;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector based on position of element with given type :nth-of-type(n)\u003C/h2>\u003Cp>This selector is similar to \u003Ci>:nth-child\u003C/i>, but it only counts elements of the same type. Let’s say we want to highlight the second link inside a block.\u003C/p>\u003Cpre>\u003Ccode>.block a:nth-of-type(2) {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Only the second \u003Cb><a>\u003C/b> tag (not second child overall) will be selected.\u003C/p>\u003Ch2>CSS selector based on position of element with given type starting from end :nth-last-of-type(n)\u003C/h2>\u003Cp>Works just like the previous one but starts counting from the end. In the example below, we highlight the second link from the end.\u003C/p>\u003Cpre>\u003Ccode>.block a:nth-last-of-type(2) {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for first child :first-child\u003C/h2>\u003Cp>This pseudo-class selects the first child element within a parent.\u003C/p>\u003Cpre>\u003Ccode>.block a:first-child {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Only the first link inside .block will be selected.\u003C/p>\u003Ch2>CSS selector for last child :last-child\u003C/h2>\u003Cp>This one does the opposite – selects the last child.\u003C/p>\u003Cpre>\u003Ccode>.block a:last-child {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for only child of its parent :only-child\u003C/h2>\u003Cp>This selector targets an element if it is the only child of its parent.\u003C/p>\u003Cpre>\u003Ccode>.block p:only-child {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Will only apply if the paragraph is the only child inside .block.\u003C/p>\u003Ch2>CSS selector for elements if there is only one element of specific type in parent :only-of-type\u003C/h2>\u003Cp>This one selects an element if it’s the only one of its type within the parent. For example, the only <a> tag in a block:\u003C/p>\u003Cpre>\u003Ccode>.block a:only-of-type {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for the first element of type :first-of-type\u003C/h2>\u003Cp>Selects the first element of a given type within its parent.\u003C/p>\u003Cpre>\u003Ccode>.block a:first-of-type {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>Only the first <a> tag inside .block will be selected, even if it’s not the first child overall.\u003C/p>\u003Ch2>CSS pseudo-elements ::before and ::after\u003C/h2>\u003Cp>These are used to add decorative content before or after the element, without touching the HTML. For example, let’s add a red dot after .block:\u003C/p>\u003Cpre>\u003Ccode>.block {\n position: relative;\n}\n\n.block::after {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: red;\n position: absolute;\n transform: translateY(-50%);\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for hover :hover\u003C/h2>\u003Cp>This one is very common and lets us apply styles on hover. For example:\u003C/p>\u003Cpre>\u003Ccode>.block:hover {\n color: red;\n}\u003C/code>\u003C/pre>\u003Ch2>CSS selector for part of the text: ::first-line and ::first-letter\u003C/h2>\u003Cp>Sometimes you need to style only a portion of the element content.\u003C/p>\u003Cpre>\u003Ccode>p::first-line {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>This will change only the first line of a paragraph.\u003C/p>\u003Cpre>\u003Ccode>p::first-letter {\n color: red;\n}\u003C/code>\u003C/pre>\u003Cp>This will change only the first letter of a paragraph.\u003C/p>\u003Cp>That's all. Thanks for reading. Hope you found something useful and know more CSS selectors now.\u003C/p>",{"time":218,"blocks":219,"version":84},1752430415524,[220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,351,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707],{"id":221,"type":20,"data":222},"yD5OKD3FDg",{"text":223},"Hello everyone, welcome to my website. In this article, I'll show you 25+ CSS selectors every frontend developer should know. This article will help both: newcomers to learn about new CSS selectors, which can be useful in the future and for developers with solid experience to remind about some rarely used selectors, but which can come in handy in certain situations.",{"id":225,"type":20,"data":226},"wqM9ZFdYXK",{"text":227},"Lets deep into the world of CSS selectors, starting from more common, to more interesting.",{"id":229,"type":25,"data":230},"vBhTZAL69o",{"text":231,"level":28},"CSS selector * for all elements",{"id":233,"type":20,"data":234},"mp50JZvoxv",{"text":235},"This selector is pretty common in the start of main CSS files. Usually, developers use it to set \u003Ci>box-sizing\u003C/i> property for every element on a page. In the case below, we will apply box-sizing and red color for every element on the page.",{"id":237,"type":35,"data":238},"ihcE8EOwD8",{"code":239},"* {\n box-sizing: border-box;\n color: red;\n}",{"id":241,"type":20,"data":242},"f8Blrl3IqT",{"text":243},"But you can use it in a more complex way. For instance, in the example below we will add color property for every element in element with \u003Ci>box\u003C/i> class.",{"id":245,"type":35,"data":246},"uIzOT7Jl6B",{"code":247},".box * {\n color: red;\n}",{"id":249,"type":25,"data":250},"xG_v3Qv17a",{"text":251,"level":28},"CSS element selector (selector by type)",{"id":253,"type":20,"data":254},"W0XPuk3_i6",{"text":255},"One of really easy to understand and common selectors. This selector will apply some CSS properties to an element with the given tag. For example, we will remove underline for every link and add margin left for every unordered list.",{"id":257,"type":35,"data":258},"zdE-XpY8JC",{"code":259},"a {\n text-decoration: none;\n}\n\nul {\n margin-left: 20px;\n}",{"id":261,"type":25,"data":262},"RtYF4iVEjz",{"text":263,"level":28},"CSS class selector",{"id":265,"type":20,"data":266},"y_qOWv4ZT2",{"text":267},"Class selector is also really popular and easy to use. As you can already understand from its name, it will apply some CSS rules to the elements with given class attribute.",{"id":269,"type":35,"data":270},"RY3e-5_VGh",{"code":271},".box {\n color: red;\n}",{"id":273,"type":25,"data":274},"ACmKmul6Q3",{"text":275,"level":28},"CSS ID selector",{"id":277,"type":20,"data":278},"nLr3yCmTeN",{"text":279},"CSS ID selectors might come in handy in some situations, but also have some limitations. Always remember, that \u003Cb>you can have only one element \u003C/b>on a page with given ID attribute.",{"id":281,"type":35,"data":282},"nGr3Su8-ih",{"code":283},"#box {\n background: lime;\n}",{"id":285,"type":25,"data":286},"wHA-Cp0as8",{"text":287,"level":28},"CSS nesting selector",{"id":289,"type":20,"data":290},"bo7CyXe23L",{"text":291},"In CSS, you can combine different selectors to make for more specific selectors. For instance, we can apply styles for any link in element with class box. ",{"id":293,"type":35,"data":294},"Dnu-1cklJ3",{"code":295},".box a {\n color: red;\n}",{"id":297,"type":20,"data":298},"MWlNCNyh93",{"text":299},"Or, like in the example below, we can apply styles by nesting 3 classes. Color will apply only for element with class example, that locates in element with class box, that locates in element with class wrapper.",{"id":301,"type":35,"data":302},"7XEAyd6rmG",{"code":303},".wrapper .box .example {\n color: red;\n}",{"id":305,"type":20,"data":306},"NdDcrb5PxH",{"text":307},"Also, we can make our selector more specific, combining tag and class. Code below will apply for links with link class.",{"id":309,"type":35,"data":310},"zMbsWemSsV",{"code":311},"a.link {\n text-decoration: none;\n}",{"id":313,"type":25,"data":314},"q_Af56sVH3",{"text":315,"level":28},"CSS selector of next element (plus selector) +",{"id":317,"type":20,"data":318},"apfEAOdF7F",{"text":319},"Moving to more interesting selector. Here you can see selector of next element. As you can already understand from its name, it selects next element after current. Let's take a look.",{"id":321,"type":20,"data":322},"r2aGuTsMmd",{"text":323},"We have HTML structure like this:",{"id":325,"type":35,"data":326},"v9UBmKGxji",{"code":327},"\u003Cdiv class=\"wrapper\">\n \u003Ch1 class=\"title\">CSS selectors are cool\u003C/h1>\n \u003Cp class=\"paragraph\">First\u003C/p>\n \u003Cp class=\"paragraph\">Second\u003C/p>\n \u003Cp class=\"paragraph\">Third\u003C/p>\n\u003C/div>",{"id":329,"type":20,"data":330},"D7DsbXLsy-",{"text":331},"And let's imagine that our task is to apply some styles for the first paragraph, but without any new classes. We can achieve this with this code:",{"id":333,"type":35,"data":334},"lr5XmCiuJA",{"code":335},".title + .paragraph {\n color: red;\n}",{"id":337,"type":20,"data":338},"8sXy2aJPPS",{"text":339},"This will only work for the first paragraph. Basically, we just tell \"Select first element with class \u003Ci>paragraph\u003C/i> after element with class \u003Ci>title\u003C/i>\"",{"id":341,"type":25,"data":342},"2M6WWUifpF",{"text":343,"level":28},"CSS selector for direct child >",{"id":345,"type":20,"data":346},"4t_ILilH4P",{"text":347},"This selector will select only elements, that are direct children of the element with the given selector. Let's take a look.",{"id":349,"type":20,"data":350},"Tof6dkIo6F",{"text":323},{"id":352,"type":35,"data":353},"CxAKX1olem",{"code":354},"\u003Cdiv class=\"box\">\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003Cdiv class=\"box-2\">\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003C/div>\n\u003C/box>",{"id":356,"type":20,"data":357},"IAAzAfYiyf",{"text":358},"Now, let's change color of \"item\" element, but only for the upper ones. We can achieve this with CSS selector for direct children.",{"id":360,"type":35,"data":361},"sbWbmzh8g7",{"code":362},".box > .item {\n color: lime;\n}",{"id":364,"type":20,"data":365},"01BSTSs9SH",{"text":366},"In this case, lime color will apply only for first 2 \"items\".",{"id":368,"type":25,"data":369},"sHBzehCdI2",{"text":370,"level":28},"CSS sibling selector (tilde) ~",{"id":372,"type":20,"data":373},"TK2zSzZYuV",{"text":374},"CSS tilde selector very similar to + selector. This one will select all the elements from the same level of depth (or nesting).",{"id":376,"type":35,"data":377},"jNtXgKCPh6",{"code":378},"\u003Cdiv class=\"box\">\n \u003Ch1 class=\"title\">Title\u003C/h1>\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003Cdiv class=\"box\">\n \u003Cdiv class=\"item\">Item\u003C/div>\n \u003C/div>\n\u003C/div>",{"id":380,"type":20,"data":381},"rXi78olnaN",{"text":382},"The code below will apply color property only for \"items\" on the same level as title is.",{"id":384,"type":35,"data":385},"Zm8sEwNsZR",{"code":386},".title ~ .item {\n color: lime;\n}",{"id":388,"type":25,"data":389},"9JkXW1acL_",{"text":390,"level":28},"CSS attribute selector [attribute]",{"id":392,"type":20,"data":393},"UJBsiHuvkn",{"text":394},"Also, we can select elements that have some attributes set. We can achieve this with square brackets.",{"id":396,"type":35,"data":397},"AQrkzitbPy",{"code":398},"\u003Cimg src=\"...\" alt=\"...\" />\n\u003Cimg src=\"...\" />",{"id":400,"type":20,"data":401},"XGOs-tHmmh",{"text":402},"In this case we will only select an image with \u003Cb>alt\u003C/b> attribute set.",{"id":404,"type":35,"data":405},"Vz5MAhrI-8",{"code":406},"[alt] {\n width: 200px;\n}",{"id":408,"type":20,"data":409},"otJypJeUk-",{"text":410},"Or we can do more specific things by combining different selector as always. Let's ensure, that we will select only images.",{"id":412,"type":35,"data":413},"bDnXpha6-T",{"code":414},"img[alt] {\n width: 200;x\n}",{"id":416,"type":25,"data":417},"W_lCE3E5ij",{"text":418,"level":28},"CSS selector by attribute value [attribute=\"value\"]",{"id":420,"type":20,"data":421},"RRwwHPxELM",{"text":422},"One more way to make previous selector more specific, is to set attribute value we are looking for.",{"id":424,"type":35,"data":425},"whMWNUZuYM",{"code":426},"\u003Cimg src=\"lion.png\" alt=\"Lion\" />\n\u003Cimg src=\"penguin.png\" alt=\"Penguin\" />\n\u003Cimg src=\"cat.png\" alt=\"Cat\" />",{"id":428,"type":20,"data":429},"CIX6yGLqvV",{"text":430},"Let's select only image with penguin.",{"id":432,"type":35,"data":433},"ILAW2I6rhz",{"code":434},"img[src=\"penguin.png\"] {\n width: 200px;\n}",{"id":436,"type":25,"data":437},"PqSxUUo2v6",{"text":438,"level":28},"CSS selector by part of attribute value [attribute*]",{"id":440,"type":20,"data":441},"-ti_5SgVPI",{"text":442},"But what if we don't want to match whole attribute value? Well, for this case we can use next selector. Let's highlight links, that have \"google\" part in their URLs.",{"id":444,"type":35,"data":445},"k1RGnaQbWa",{"code":446},"\u003Ca href=\"https://accounts.google.com\">Google\u003C/a>\n\u003Ca href=\"https://google.com\">Google\u003C/a>\n\u003Ca href=\"https://youtube.com\">Youtube\u003C/a>",{"id":448,"type":20,"data":449},"Rg0I4JWzDz",{"text":450},"In this case, only links that have \"google\" in their hrefs will be highlighted.",{"id":452,"type":35,"data":453},"fvcgEaz_ah",{"code":454},"a[href*=\"google\"] {\n color: lime;\n}",{"id":456,"type":25,"data":457},"_uGZrrNyoq",{"text":458,"level":28},"CSS selector by attribute value start [attribute^]",{"id":460,"type":20,"data":461},"0Z2agmh_IZ",{"text":462},"Previous selector is great for the most tasks, but also, we can find attributes values, that start with specific text. For instance, let's make different highlighting for safe and unsafe links.",{"id":464,"type":35,"data":465},"rAXu6ipjaJ",{"code":466},"\u003Ca href=\"https://google.com\">Google (safe)\u003C/a>\n\u003Ca href=\"http://google.com\">Google (unsafe)\u003C/a>",{"id":468,"type":20,"data":469},"qgT1cSFI5e",{"text":470},"The code below will mark safe (https, secured) links with lime color, and unsafe (plain http) with red color.",{"id":472,"type":35,"data":473},"dkkfxua_3X",{"code":474},"a[href^=\"https\"] {\n color: lime;\n}\n\na[href^=\"http\"] {\n color: red;\n}",{"id":476,"type":25,"data":477},"mF0LjjmYcl",{"text":478,"level":28},"CSS selector by attribute end [attribute$]",{"id":480,"type":20,"data":481},"P7BoYSe330",{"text":482},"Also, we have a opposite selector to previous one, This selector will allow us to select elements, that have some attribute value ending. Let's make all JPG images 300 pixels width.",{"id":484,"type":35,"data":485},"3xmf2BgtcR",{"code":486},"\u003Cimg src=\"cat.png\" alt=\"cat\" />\n\u003Cimg src=\"dog.jpg\" alt=\"dog\" />",{"id":488,"type":20,"data":489},"i0vSI30tTV",{"text":490},"Let's select only image, that have \u003Ci>src\u003C/i> attribute ending with '.jpg'.",{"id":492,"type":35,"data":493},"QpQ6iHHz0P",{"code":494},"img[src$=\".jpg\"] {\n width: 300px;\n}",{"id":496,"type":25,"data":497},"hwb-Ng2dJt",{"text":498,"level":28},"CSS selector for checked inputs :checked",{"id":500,"type":20,"data":501},"kSRtbZUX1t",{"text":502},"Now, let's talk about checkbox and radio inputs. There is a way of how to select only checked elements. To do this, we will be using :checked selector. This technique can be useful if you're creating custom input elements.",{"id":504,"type":35,"data":505},"nMWAUkliBJ",{"code":506},"\u003Cinput type=\"checkbox\" name=\"example-1\" />\n\u003Cinput type=\"checkbox\" checked name=\"example-2\" />\n\u003Cinput type=\"checkbox\" name=\"example-3\" />",{"id":508,"type":20,"data":509},"zqG1wsxZzW",{"text":510},"The selector below will select only the second input. Don't worry, it'd work even if user click on this element, checked attribute was added only for visual understanding.",{"id":512,"type":35,"data":513},"8EPgbMuqms",{"code":514},"input:checked {\n // Do something with it\n}",{"id":516,"type":25,"data":517},"cI9aFfyFw5",{"text":518,"level":28},"CSS not selector :not(selector)",{"id":520,"type":20,"data":521},"no9d_NA2Re",{"text":522},"CSS not selector will help us to pick some elements, except other ones by condition. In the example below, we will change the color of all div elements, except those that have class \"box\".",{"id":524,"type":35,"data":525},"RC_QcdqLzE",{"code":526},"div:not(.box) {\n background: red;\n}",{"id":528,"type":25,"data":529},"tTJdUyMuKq",{"text":530,"level":28},"CSS selector based position of element :nth-child(n)",{"id":532,"type":20,"data":533},"9w0_O-LwNA",{"text":534},"This selector will help us to find nth element in its parent.",{"id":536,"type":20,"data":537},"m_g4240y2g",{"text":538},"Let's mark every second link in an element with \"block\" class.",{"id":540,"type":35,"data":541},"-YGoA6H63c",{"code":542},".block a:nth-child(2) {\n color: red;\n}",{"id":544,"type":25,"data":545},"s28ogYT70S",{"text":546,"level":28},"CSS selector based on position starting from the end :nth-last-child(n)",{"id":548,"type":20,"data":549},"aUDG-QvHF3",{"text":550},"Also, we have similar selector, but starting from the end.",{"id":552,"type":20,"data":553},"oV0LgzSaCS",{"text":554},"Let's mark every 3rd link in an element with \"block\" class, starting from the end.",{"id":556,"type":35,"data":557},"7SCGZBkVQt",{"code":558},".block a:nth-last-child(3) {\n color: lime;\n}",{"id":560,"type":25,"data":561},"vZO5sG3VkM",{"text":562,"level":28},"CSS selector based on position of element with given type :nth-of-type(n)",{"id":564,"type":20,"data":565},"HFDyV0qB3I",{"text":566},"This selector is similar to \u003Ci>:nth-child\u003C/i>, but it only counts elements of the same type. Let’s say we want to highlight the second link inside a block.",{"id":568,"type":35,"data":569},"I7OncFvY_8",{"code":570},".block a:nth-of-type(2) {\n color: red;\n}",{"id":572,"type":20,"data":573},"JMMsEBoxSw",{"text":574},"Only the second \u003Cb><a>\u003C/b> tag (not second child overall) will be selected.",{"id":576,"type":25,"data":577},"zTsDPUDkv6",{"text":578,"level":28},"CSS selector based on position of element with given type starting from end :nth-last-of-type(n)",{"id":580,"type":20,"data":581},"2sCy0FRqr4",{"text":582},"Works just like the previous one but starts counting from the end. In the example below, we highlight the second link from the end.",{"id":584,"type":35,"data":585},"2PtYv5Y1St",{"code":586},".block a:nth-last-of-type(2) {\n color: red;\n}",{"id":588,"type":25,"data":589},"sT_c5kzQJH",{"text":590,"level":28},"CSS selector for first child :first-child",{"id":592,"type":20,"data":593},"zYXEoeuOAP",{"text":594},"This pseudo-class selects the first child element within a parent.",{"id":596,"type":35,"data":597},"61YuUQEwmC",{"code":598},".block a:first-child {\n color: red;\n}",{"id":600,"type":20,"data":601},"YPYsgScSzH",{"text":602},"Only the first link inside .block will be selected.",{"id":604,"type":25,"data":605},"0ukROTwtqf",{"text":606,"level":28},"CSS selector for last child :last-child",{"id":608,"type":20,"data":609},"WesSZUy-jA",{"text":610},"This one does the opposite – selects the last child.",{"id":612,"type":35,"data":613},"VZyV1VT10U",{"code":614},".block a:last-child {\n color: red;\n}",{"id":616,"type":25,"data":617},"eAt3KNM8fe",{"text":618,"level":28},"CSS selector for only child of its parent :only-child",{"id":620,"type":20,"data":621},"L5QmarSaRT",{"text":622},"This selector targets an element if it is the only child of its parent.",{"id":624,"type":35,"data":625},"kN-7lHNfnf",{"code":626},".block p:only-child {\n color: red;\n}",{"id":628,"type":20,"data":629},"Q-ylsZWERn",{"text":630},"Will only apply if the paragraph is the only child inside .block.",{"id":632,"type":25,"data":633},"xTfqZq2UgL",{"text":634,"level":28},"CSS selector for elements if there is only one element of specific type in parent :only-of-type",{"id":636,"type":20,"data":637},"oZJy950SUn",{"text":638},"This one selects an element if it’s the only one of its type within the parent. For example, the only <a> tag in a block:",{"id":640,"type":35,"data":641},"IPSSvr4TZR",{"code":642},".block a:only-of-type {\n color: red;\n}",{"id":644,"type":25,"data":645},"6ZhcEoVD1Z",{"text":646,"level":28},"CSS selector for the first element of type :first-of-type",{"id":648,"type":20,"data":649},"ZfN3dotgwW",{"text":650},"Selects the first element of a given type within its parent.",{"id":652,"type":35,"data":653},"65z2q4wahb",{"code":654},".block a:first-of-type {\n color: red;\n}",{"id":656,"type":20,"data":657},"pBDuiRh9uW",{"text":658},"Only the first <a> tag inside .block will be selected, even if it’s not the first child overall.",{"id":660,"type":25,"data":661},"Kde43YwXXC",{"text":662,"level":28},"CSS pseudo-elements ::before and ::after",{"id":664,"type":20,"data":665},"5Y7VPWTzI8",{"text":666},"These are used to add decorative content before or after the element, without touching the HTML. For example, let’s add a red dot after .block:",{"id":668,"type":35,"data":669},"eRuOr1rGdG",{"code":670},".block {\n position: relative;\n}\n\n.block::after {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: red;\n position: absolute;\n transform: translateY(-50%);\n}",{"id":672,"type":25,"data":673},"Hi2GZ44RRY",{"text":674,"level":28},"CSS selector for hover :hover",{"id":676,"type":20,"data":677},"zR47l3TfjK",{"text":678},"This one is very common and lets us apply styles on hover. For example:",{"id":680,"type":35,"data":681},"gFt1Nq_cOz",{"code":682},".block:hover {\n color: red;\n}",{"id":684,"type":25,"data":685},"v-l24GfsZj",{"text":686,"level":28},"CSS selector for part of the text: ::first-line and ::first-letter",{"id":688,"type":20,"data":689},"Yrh3dziZ-D",{"text":690},"Sometimes you need to style only a portion of the element content.",{"id":692,"type":35,"data":693},"xbVwdmle17",{"code":694},"p::first-line {\n color: red;\n}",{"id":696,"type":20,"data":697},"xG2honHMio",{"text":698},"This will change only the first line of a paragraph.",{"id":700,"type":35,"data":701},"qE_HE9evzN",{"code":702},"p::first-letter {\n color: red;\n}",{"id":704,"type":20,"data":705},"KnuzdvkTok",{"text":706},"This will change only the first letter of a paragraph.",{"id":708,"type":20,"data":709},"w9fxy-CU9S",{"text":710},"That's all. Thanks for reading. Hope you found something useful and know more CSS selectors now.","/uploads/posts/2024/05/25/30-css-selectors-you-should-know.jpg",4,[714],{"_id":90,"name":91,"slug":92,"description":93,"types":715,"createdAt":95,"__v":96},[86],9,{"_id":718,"userId":9,"title":719,"slug":720,"description":721,"content":722,"thumbnail":775,"type":86,"views":776,"tags":777,"published":97,"createdAt":780,"updatedAt":780,"timeToRead":99,"__v":96},"67349919e2c71ad256c458d8","Pure css shine animation","pure-css-shine-animation","In this simple and easy tutorial, I'm gonna to show you how to create a shine effect for any website element using CSS. Shine animation can create accent for an element. It looks good on buttons. We will be using only pure CSS and HTML, no scripts needed.",{"html":723,"json":724},"\u003Cp>Hi everyone, welcome to my website. In this quick and easy tutorial, I'll show you how to create a shine animation for any element of your website, \u003Cb>using only pure HTML and CSS\u003C/b>, no scripts needed. In the article, I'll implement animation for a button, but you can apply this to almost any element on your website.\u003C/p>\u003Cp>If you want just to copy and paste the code, or to experiment with it, here is a \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/PoMVXvR\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> I created with this feature.\u003C/p>\u003Ch2>Creating CSS shine animation effect\u003C/h2>\u003Cp>First things first, let's create an element, to which we will add our shine animation. In my case, I'll create a link, that will play a role of button.\u003C/p>\u003Cpre>\u003Ccode><a href=\"#\" class=\"button\">Button</a>\u003C/code>\u003C/pre>\u003Cp>Next lets add some styles, to make button looks more fancy.\u003C/p>\u003Cpre>\u003Ccode>.button {\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative; // relative position is important to place shine properly\n overflow-x: hidden; // overflow is important, to hide animation outside the button\n}\u003C/code>\u003C/pre>\u003Cp>From CSS code above, it's important to add \u003Ci>overflow\u003C/i> and \u003Cb>position\u003C/b> properties. \u003Cb>Position\u003C/b> will help to place animation properly, and \u003Cb>overflow\u003C/b> will hide animation outside the button.\u003C/p>\u003Cp>Finally, let's add our \"shine\" and an animation for it. I'll make \"shine\" from pseudo-element (::before in this case)\u003C/p>\u003Cpre>\u003Ccode>.button::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\u003C/code>\u003C/pre>\u003Cp>That's all. You can play with pseudo-element and animation to configure effect like you want. Here is a result.\u003C/p>\u003Cdiv class=\"button-shine__wrapper\">\n \u003Ca href=\"#\" class=\"button-shine\">Button\u003C/a>\n\u003C/div>\n\n\n\u003Cstyle>\n.button-shine__wrapper {\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.button-shine {\n margin-top: 20px;\n color: #fff !important;\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative;\n overflow-x: hidden;\n}\n\n.button-shine::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\n\u003C/style>",{"time":725,"blocks":726,"version":84},1732123686547,[727,731,735,739,743,747,751,755,759,763,767,771],{"id":728,"type":20,"data":729},"Tc0k5U1XTK",{"text":730},"Hi everyone, welcome to my website. In this quick and easy tutorial, I'll show you how to create a shine animation for any element of your website, \u003Cb>using only pure HTML and CSS\u003C/b>, no scripts needed. In the article, I'll implement animation for a button, but you can apply this to almost any element on your website.",{"id":732,"type":20,"data":733},"jAY1czz5jg",{"text":734},"If you want just to copy and paste the code, or to experiment with it, here is a \u003Ca href=\"https://codepen.io/Nazarii-Semeniuk/pen/PoMVXvR\" target=\"_blank\" rel=\"nofollow\">codepen\u003C/a> I created with this feature.",{"id":736,"type":25,"data":737},"z5W9lzKbXh",{"text":738,"level":28},"Creating CSS shine animation effect",{"id":740,"type":20,"data":741},"ivkIq9jlmO",{"text":742},"First things first, let's create an element, to which we will add our shine animation. In my case, I'll create a link, that will play a role of button.",{"id":744,"type":35,"data":745},"nL3Zv6JiBq",{"code":746},"\u003Ca href=\"#\" class=\"button\">Button\u003C/a>",{"id":748,"type":20,"data":749},"MMJQlMWyqf",{"text":750},"Next lets add some styles, to make button looks more fancy.",{"id":752,"type":35,"data":753},"cuYRzaLh__",{"code":754},".button {\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative; // relative position is important to place shine properly\n overflow-x: hidden; // overflow is important, to hide animation outside the button\n}",{"id":756,"type":20,"data":757},"ZWtlOsh9g5",{"text":758},"From CSS code above, it's important to add \u003Ci>overflow\u003C/i> and \u003Cb>position\u003C/b> properties. \u003Cb>Position\u003C/b> will help to place animation properly, and \u003Cb>overflow\u003C/b> will hide animation outside the button.",{"id":760,"type":20,"data":761},"MZ3RwaQUhD",{"text":762},"Finally, let's add our \"shine\" and an animation for it. I'll make \"shine\" from pseudo-element (::before in this case)",{"id":764,"type":35,"data":765},"jAvb23Q3H9",{"code":766},".button::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}",{"id":768,"type":20,"data":769},"4D-glEr7KT",{"text":770},"That's all. You can play with pseudo-element and animation to configure effect like you want. Here is a result.",{"id":772,"type":201,"data":773},"1KdJK1Knsz",{"html":774},"\u003Cdiv class=\"button-shine__wrapper\">\n \u003Ca href=\"#\" class=\"button-shine\">Button\u003C/a>\n\u003C/div>\n\n\n\u003Cstyle>\n.button-shine__wrapper {\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.button-shine {\n margin-top: 20px;\n color: #fff !important;\n padding: 20px 80px;\n background: linear-gradient(\n 90deg,\n #ff5e69 44.79%,\n #ff8a56 71.87%,\n #ffa84b 99.99%\n );\n color: #ffffff;\n text-decoration: none;\n font-size: 24px;\n font-weight: 600;\n border-radius: 10px;\n position: relative;\n overflow-x: hidden;\n}\n\n.button-shine::before {\n content: '';\n position: absolute;\n top: 0;\n height: 100%;\n width: 45px;\n transform: skewX(-45deg);\n left: -150%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.6)\n );\n animation: shineAnimation 3s infinite linear;\n}\n\n@keyframes shineAnimation {\n 0% {\n left: -150%;\n }\n 100% {\n left: 150%;\n }\n}\n\u003C/style>","/uploads/posts/2024/11/13/pure-css-shind-animation.jpg",57,[778],{"_id":90,"name":91,"slug":92,"description":93,"types":779,"createdAt":95,"__v":96},[86],1727280437729,{"message":5,"tags":782},[783],{"_id":90,"name":91,"slug":92,"description":93,"types":784,"createdAt":95,"__v":96},[86],["Reactive",786],{"$smodal":787,"$snotifications":789},{"name":788},null,[],["Set"],["ShallowReactive",792],{"posts-get-many-by-tag-css":-1,"tags-get-many-tutorial":-1},"/tutorials/tags/css/"]