WebDev Tips . Know your CSS selectors (part 2)

Know your CSS selectors (part 2)

#109

CSS

December 14, 2019

How is your Saturday going guys? Today we'll be seeing some cool CSS selectors that you can and should use. This is a Part 2 of this topic, you can check Part 1 on my tip #60 so find some more practical CSS selectors.

.container a {
   /* Will target every 'a' inside the '.container' */
}

a:link {
   /* Will target every 'a' that have not been clicked yet */
}

a:visited {
   /* Will target every 'a' that have already been clicked or visited */
}

input:focus {
   /* Will target every 'input' when it has focus */
}

p:not(.text) {
   /* Will target every 'p' that doesn't has a class of '.text' */
}

p::first-line {
   /* Will target only the first line of a 'p' */
}

.container p:first-child {
   /* Will the first 'p' inside '.container' */
}

.item:nth-child(odd) {
   /* Will target all '.item' elements that are odd */
}

.item:nth-child(even) {
   /* Will target all '.item' elements that are even */
}

I find most of these super helpful in a lot of different situations. Hope you understand them all and what they do. If you have any doubts just leave a comment or send a DM 😁📥
Hope you have an amazing weekend, cya! 😁