An overview of CSS Selectors

An overview of CSS Selectors

In web development there are often numerous ways to achieve the same result. A key to writing good code (regardless of the language), is using the most efficient method possible, writing as little code as necessary and keeping the codebase to the absolute minimum. This will result in both faster page load times, as well as clarity in the source code for yourself and other developers. In writing CSS, it is important to know how to select the elements you want to target, and the best method to do so. This blog post will take a look at some of the most common CSS selectors, and the best instances in which to use each of them.

Type Selectors

For every HTML element, there is a corresponding selector for that element type. Whether it be a div, p, img or any other HTML element, the corresponding CSS selector is exactly the same, minus the angle brackets used in the tag:

p {
  color: black;
}
div {
  display: inline: block;
}
img {
  width: 200px;
}

 

Type selectors are ideal when you want to target every instance of a given element type and apply the same styles for all of them.

Class Selectors

Class selectors utilize a class name associated with specific elements. This selector is ideal when you want to apply certain styles to a variety of a different elements, regardless of the element type. For example, you may have a class of .responsive applied to a p, div and img element:

<p class="responsive">This paragraph is responsive</p>
<div class="responsive">
    A responsive div
</div>
<img class="responsive" src="http://google.com/my-responsive-img.jpg">

 

The following CSS code block will target all of these elements with the same class:

.responsive {
  width: 80%;
  margin: 0 auto;
}

 

Class selectors are always designated in a stylesheet using a period (.) before the class name.

ID Selectors

ID selectors are similar to class selectors, although they can only be applied to a single element in a given HTML document. This is useful when you only want to target a single element:

<p id="myParagraph">This is a paragraph with unique styles</p>
#myParagraph {
  color: green:
  width: 200px;
  float: left;
  display: inline-block;
}

 

ID selectors are always designated in a stylesheet using the pound or hash sign (#) before the ID name.

Universal Selector

The universal selector will target every single element in an HTML document. This is often used for CSS resets, such as removing default margin, padding and other styles from all elements:

* {
  margin: 0;
  padding: 0;
}

 

The universal selector is designated using the asterisk (*).

:hover

Another common selector (and one of the many CSS “pseudo-classes”) is :hover. Adding this pseudo-class to any selector will target the element’s hover state. This means that these styles will only be applied when a user hovers over that element with their mouse:

a:hover {
  text-decoration: underline;
  color: purple;
}

 

:hover is often used for links or any element you want to highlight when the user is hovering over it. This pseudo-class works well for laptop and desktop users, although has no real use for mobile devices, due to the lack of a mouse cursor.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC