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

  • Posted on: 13 May 2017
  • By: Hernando Cadet
css and html

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!!!