Mastering Cascading Style Sheet - Structuring Your Code - Types of Selectors - Elements, Divs and IDs


It is imperative that as developers he or she stays on track and on top of their skills, to become the best web developer, the world has ever seen.

In today’s article we are going to talk about CSS, in particular about selectors, which help your styles to hit the target element, a front-end developer would like to target and format.

The framework to which your styles are applied to, are provided by a well-structured and valid document.

Some ways of targeting elements, must be established, in order to be able, to style a particular (X) HTML element using CSS.

The selector is the part of CSS style rule, which can assist a front-end developer, to target elements on an (X) HTML document.

Some selectors would look like this: p {color: black ;}, a {text-decoration: underline ;} and h1 {font-weight: bold ;},( p), (h1) and (a), would be considered the selectors on the example given above; these are element selectors, a different type of selectors, we also talked on a previous series of this article, about other types of selectors, such as Divs and ID selectors.

When descendants of a particular element or a group of elements, have to be targeted, then the descendant selector, would be used.

A space between two other selectors, would indicate the presence of a descendant selector.

Such a descendant selector, would look as such: li a {text-decoration: none ;}, in case it needs to be used, to be able to style only the element, which are descendants; in the example given, the (li) and the (a) would be considered the selectors.

ID and class selectors, are used in order to be more to the point, specific and targeted, to selected elements, which a styles needs to be applied to.

A corresponding ID or class name, would be used, in order for selectors to target elements, using IDs and classes.

A hash character, would be used to identify ID selectors, whereas a period is used in order to identify a class selector.

If a text on a page needs to be bold, then a designer could use an ID selector to make that text bold, as such: (CSS RULE = #bold_text {font-weight: bold ;}, HTML COD = <p> ID= “bold_text”>bold the text </p>).

If the color of a text needs to be changed, then a front-end website designer, could use a CSS rule using a class selector, which would look as such: (CSS RULE = .color_text {color: green ;}, HTML CODE = <p> class= “color_text”>Change Color </p >).

A reliance on class on ID selectors and class selectors, have been developed by many front-end developers, due to the fact, that if they want to style something one way on the main content area, but different, on a second content area on the same page, and are using the same element, such as (h1), a front-end web developer, would have to find a way of accomplishing this tasks, with selectors.

When something such as a menu needs to be styled two different ways on the same website page, then a front-end designer, does not have to create different classes, and apply them to the different menus, instead, front-end developers, can use a combination of type, descendant, IDs and/or class selectors, to accomplish this task, which could be daunting to some people to accomplish but possible.

A good example of this can be seen here: #mainMenu h1 {font-size: 2.0em ;}, #subMainMenu h1 {font-size 1.2em ;}.

Using just the four selectors, mentioned earlier, it will be to your surprise, that front-end developers can do so much, with so little, but many combinations, of selector elements, IDs and classes.

Thank you for reading this article!!!


Add a Comment

Hernando Cadet

Hi every one, I obtained a bachelor's degree in Bioinformatics back in 2006, from Claflin University, after I received my bachelor's degree, I gained full time employment as a software engineer at a Video Relay Service company, maintaining databases and developing software for a new developed device called the VPAD.

I worked at that company for two years, then I became a web developer, and worked for a magazine for three years. After that job, I worked as a Drupal web developer, as a subcontractor for the NIH, for a year and then left the job to go back to school.

Hernando Cadet

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.