Lors ♥️@miss_lorsxI don’t know who needs to hear this;
But mixing up the correct selector when targeting Classes & ID’s is ok.
Honestly, it’s something I’ll have to live with now, because I’ve done it 1000 time’s and I still forget. 🤦🏼♀️
Good day. 😃
#DEVCommunity16:08 PM - 01 Aug 2020
Note: This is for absolute beginners
I dont know how many times I have found myself googling 'CSS selectors' and even now, I still find myself mixing up how to target CLASSES and ID's with selectors when using CSS, So lets glance over the basic ones, most commonly used in the world of CSS styling.
Upon posting the above tweet, I found many others agreeing, so I wanted to talk about something that seems to confuse even the most confident of developers.
These are patterns that we can use, to select the element we want to style.
This selects all HTML elements based on It's element name EG Div, Paragraph, header etc.
Cascading Style Sheet
Also known as CSS, describes how HTML elements should be displayed on a website or other media. It can control and alter multiple layouts at once, saving a lot of work and time In the process.
Where can we use selectors?
Selectors are used to target specific ID's or classes; they tell the web browser which HTML elements should be selected, to have the given CSS rule/value applied to them.
We can use 2 specific selectors ( ‘.’ & ‘#’) to change the CSS of an element, by targeting them.
Types of Selector:
(.) - Period or full stop; This targets a
class, and will apply any modified changes to that particular element.
(#) - Hash sign; These are used to target a specific element with a unique ID.
Note: Its important to get these the correct way round when you are targeting elements, because if not, the changes made in the stylesheet will not apply. (Trust me, Its ok if you get these mixed up to begin with, It has taken me some time to get it right myself!)
Selectors should be displayed like this:
Additional selectors can be used to change the appearance of various rules created.
Some of these include:
Hopefully this mini-article will help grasp some of the basics reagrding CSS selectors.
I’m planning to go more in depth about @media & targeting paragraphs in another article; So watch this space! 😃