Why Is Your Css Not Working As Like You Wanted??

See the way we taught CSS is used for changing the background colour, and increasing the font size on the web page it isn't all about css, of course I won't deny css is used for this stuff only but it's a half-truth. Let's see the secret getting fairly accurate with CSS bcoz you easily find people striking their heads with css in real development, struggling to make things work.

A Rule to make it work😁

CSS is all about selecting the correct element and putting on styles on it.

In the world of CSS if things don’t work you are probably the one responsible because you target an element in the wrong way, property is gone doing its job for sure.

You’ll probably be knowing hundreds of css properties but that’s not going to make you master in css all those properties will not gone make sense to you if you didn’t know where to use those on a page it’s all going to be trash right?? And you'll get in the loop to debug your css every time which you probably didn't want I'm sure.

Let's see some of type selector

1. Universal Sector

Universal selector is defined with an asterisk * sign and the job is to apply all the styling in the whole webpage that’s pretty much all.

Using this unique selector and its feature you can define signature styles such as font size, colours, etc, which helps the user to uniquely identify your website.

* { style properties }

We just applied 4 css properties and look how the whole page followed that's all you need to know as of now

2. Individual Selector

The way this selector works is you just need to write the element like the P you want to target and apply the styles on it, but this comes with a limitation which is it doesn't know which P you are targeting it will apply the same styling to all P element present into a page.

 p {
      background-color: #023047;
      color: #8eecf5;
      font-size: 20px;
    }

A task for you😀

Copy the above snippet and paste it between the style tag in the below pen and click on a run pen.

Did you notice how all the paragraphs of the page get the same styling? Yup, I do agree this is a limitation but it will help you to define common styling to such elements and later on, defining a class with on that will help you to reduce the repetition in your code.

3. Class Selector

A class starts simply start with . followed by the class name as shown in the below snippet. The use case of this selector is simple just apply this styling on the element this class is defined. This is commonly used by all developer to give the same styling on some elements like span, button, etc.

.classname{ style properties }

A task for you😀

just add a class="btn" on the 2nd button below in the HTML file and see how the output.

This is the benefit of using classes you just need to write once and use it numerous times on your page.

4. ID Selector

Ids are considered for uniquely identifying elements over a webpage it starts with # sign followed by the id name.

#id{ style properties }

you'll surely be saying what's the usage of id when the class selector is doing some work?? but yes there is a subtle difference which comes when you link your javascript file or use a framework like react, So it is recommended to avoid over usage of multiple ids in your webpage for styling purposes instead use a class for it.

5. Compound Selector

This is known as the chaining of the selector which means whatever I'm writing should only be applied to those elements who are having such classes defined on them or ids.

button.black-btn.warning{ style properties }

As we can see only one button is satisfying this chain condition in our page example below and the 2nd one isn't so it won't get style if you pass the following to classes on 2nd button then it will also get those styles That's all.

6. Combined Selector

This is the simplest selector present in the list, which simply job is to apply the same styling to all those elements or classes or id's which are separated by, see the syntax below.

h1,p,span.text-small { style properties }

As you can see we applied style onh1, span, and li how only those elements got affected by the same style.

7. Descendant selector

Let's make it simple to understand rather than focusing on a technicality here we are kind of giving a path to deep down nested element which is span to apply style on in our case which is nested down 2elements but this without using any classes or id's.

.container p span{ style properties }

Here In our 2nd case, we need to apply styles on li which is nested into a div & ul right? will so the same as above div ul li and voila you did it.

A task for you😀

I've created a similar kind of example but instead of li, there is one more element h1 nested into just trying to add h1 in 2nd case and see what happens.

I hope you have tried, This time only h1 got selected right and not li style got removed why?? It is because you said to do so got you select only h1 which is nested deep down 4 elements.

8. Direct Child

This selector is used when we need to select children of the parent element kind of similar to the above one, but here we place a greater than > between the parent and child element.

parent-selector > child-selector {
    property: value;
}

9. Adjacent sibling selector

This is rarely used in production but you need to just have a vague idea of how it works because this might get asked to test your in-depth knowledge about selectors. So see the below codepen we have we have declared 5 P right, and on one of them, we have applied a class name sibling.

.sibling + p { styles properties }

Here the + separates two elements and matches the 2nd one, but if in case there's no p after .sibling class then it won't be selected

A task for you😀

move class="sibling" to other p and guess with p element will select.

Have you seen how we apply a sibling class on test 1 and paragraph but test 2 got to highlight that's it nothing more than this.

Pseudo-classes

A pseudo-class is to define a special state of an element, like what happens on the user mouse over, or mouse click, here we are defining a few extra styling on a selected element using pseudo-classes to apply such style on such events.

p:hover { styles properties }

Just take your mouse on any of those P tags and see the results. we were using some background black and text colour white as soon we hover over it new styles kicked in which is mentioned in p:hover

Read here on more pseudo classes

Pseudo Elements

A pseudo-element is like adding or targeting an extra element without having to add more HTML, In terms of syntax, pseudo-elements use two colons instead of one (::), though some pseudo-elements also support single-colon syntax it is recommended to use (::) by industry standards.

::before

This is gone creating a pseudo-element before the selected li in the below example. see the element which we are gone adding will not be written into HTML, but make sure you write content=""and set display="block" or inline-block to make them work.

See the HTML we just added a simple li nothing more but now see the results. A new element got loaded how before or li?? because we added a::before and put some custom styles.

::after

The only difference betweenis this is also gone creating a pseudo element but after the li, other than this everything is similar. The only difference between ::before & ::after is this is also gone creating a pseudo-element but after the li other than this everything is similar.

That's all for today see you with the next one soon.