Day 23 of #100DaysOfCode
Topic: CSS Selectors.
today we will look at CSS Selectors and how it will be useful to us in targeting and styling our HTML tags…
nth Child Selectors: this is a very useful tool in targeting or selecting tags…lets say in a situation where we the below…
For us to target the and style the 7th li tag we simply do..
As we can see in the above examples, in the first example i targeted the first and the seventh li tag using the nth child() selector i also used it to target and style the li with odd and even numbers…how can cool is that!!.
nth of Type Selector: this is a little bit similar to the nth child selector…check out the example below.
Did you notice the difference between the above example and he nth child example i gave?…well the difference is that in nth child we target it as a child of a parent element..but with nth of type selector we can easily target is by type and style it individually.
Combining Selectors: Now we look at the way or ways in which we can combine two selectors together.
Look at the above HTML document,we can see that both article tag and the div tag has one class(featured-content). what if we want to style the div and the article differently.yeah we can do that by combining the selectors as we can see in the below example.
Universal Selectors: this is another very useful tag,it is used most time to reset the default browser styling in our website.
There we have it,the Universal selector(*) which is used to select everything and anything in our page…its quite powerful so we must be careful how to use it.
Note: we must only use it when ever its necessary…That’s all for today,catch you all next time and don’t forget to clap and share this article after reading it.
thanks.
chibueze ukaegbu Ugwuanyi Chidera Codecademy Code and Theory Girls Who Code Code.org Women Who Code
