Best CSS Selectors You Need to Know

CSS is a fantastic front-end style-sheet language. It's responsible for making our projects look fantastic. Now with the evolution of CSS, many useful and fun features have been thrown into the mix including how we target our elements. Over the years of creating web apps and websites, there's some selectors that are constantly being used and others than get used a little less often, but hold a high amount of importance. Let's get into it!

#skillLevel: Beginner; {

1. *

* {
margin:0;
padding:0;
}

 This is not recommended for production code, as this targets all elements on a page. This method can work for testing purposes, but this will hurt performance if used in production mode. 

2. #Id, .ClassName

#thisIsAnId {
  background:#000;
  color:#fff;
  padding:0px;

}

.thisIsAClass {
  background:#000;
  color:#fff;
  padding:0px;
  
}

This is probably the most commonly used selector in CSS. The # symbol is used to select an ID from a page while the period is used to select classes on a page. The ID will target only the element with that name, while the period will select all elements with the same class name. It is not recommended to overly use id's. There are numerous ways for selecting elements to reduce the use of using id's on too many elements. I'll cover those as we go on.

3. element > element

#thisIsTheParentId > p { 
   color:red;
}

In this example, by using the greater than symbol, it will target all `p` elements within the parent element. This is a powerful way to style many elements at one time that share a common style while still keeping them contained to a specific parent element.

4. .sampleClass1.sampleClass2

.thisIsTheParentId.anotherClassName { 
   font-size:18px;
}

This method will select an element(s) that have both class names within the class attribute. An example case of this could be in a navigation menu where there are multiple <li> elements. Some list items could have a single class while some could have two classes so a specific style can be assigned for certain uses.

5. .sampleClass1 .sampleClass2

.thisIsTheParentId .anotherChildClass {
   width:100%;
   margin:0 auto;
}

In this example, we are selecting the elements with a class name of .anotherChildClass which are children of .thisIsTheParentClass. 

6. element.class

p.sampleClass {
   color:#fff;
   font-size:18px;
   line-height:1;
   
}

This selector targets all p tags with the specified class name. This is a simple and effective way to target multiple of the same element while narrowing down the styling to a specific class name. 

7. element element

div p {
   color:#fff;
}

li a  {
   text-decoration:none;
}

ul li {
   background-color:#f8f8f8;
}

The descendant selector. This is a very common selector method that allows you to get a little more precise with your styling. For example, instead of selecting all links, you can select links within a list element or you could select specific heading tags within a div

 

8. Target Links

a:visited {
   color:red;
}

a:link {
   color:#000;
}

This is a pseudo class that allows us to target links which have not been clicked on by using a:link. Conversely, you can use a:visited to target the list that have been clicked on.

9. element:hover

#sampleId:hover {
   color:#000; 
   box-shadow:0px 3px 3px -3px #444;
   transform:scale(1.1);
}

Ok, this one is pretty self explanatory. This is another pseudo class selector that targets a specific element, Id or Class and adds a hover effect to it. This will be very commonly used to add hover effects to links within a menu. It's also very commonly used now for modern designs to incorporate the :hover for interactivity such as flipboxes and fancy button animations. The Code Crypt has some of these hover effects featured on our site!

}

#skillLevel:intermediate {

10. element[attribute]

input[type="email"] {
   color:red;
   background:#f8f8f8;
   border:1px solid blue;
}

<form action="" method="post" id="myForm">
   <input type="text" value="" placeholder="Enter Name">
   <input type="email" value="" placeholder="Enter Email">
</form>

This is an attribute selector. This allows you to select different types of attributes within an element. This is a very common method of styling when creating forms.

11. element[attribute].checked

input[type=radio]:checked {
   border:1px solid red;
}

This is a pseudo class that allows you to style elements that are checked. This works with radio buttons and checkboxes. 

12.element:not(selector)

input:not(.className) {
   background-color:#eeeeee;
}

This is an overlooked but relatively helpful pseudo class that allows you to select all of an element except for one that has a specific ID or class. 

13 ::before, ::after

#h2::before {
   content:"";
   position:absolute;
   display:inline-block;
   height:2px;
   width:150px;
   background-color:red;
   margin:0 0 10px 25px;

}

#h2::after{
   content:"";
   position:absolute;
   display:inline-block;
   height:2px;
   width:150px;
   background-color:red;
   margin:0 25px 10px 0;

}

This is by far one of my favorites. Instead of a pseudo class, this is considered a pseudo element which is distinguished by the :: notation that came along with CSS3. Due to earlier versions of CSS, User Agents are still required to remain compatible with the : notation so :after and :before is just as accepted as ::after and ::before. However, over the years I have found it a nice way to distinguish pseudo classes from pseudo elements so I prefer the :: notation, although some will still argue that : should still be used. 

These pseudo elements allow you to add content before and after the selected element. You can create arrows, menu icons, quoting text, breadcrumbs navigation etc. The above snippet will add a horizontal line to the left and right of the h2 element giving it a nice styled appearance. The possibilities are endless with these pseudo elements!

14. element:nth-child(x)

li:nth-child(2) {
   color: green;
}

Need to target a specific element within a list or a specific paragraph in a div? The nth-child pseudo class allows you to select it. Unlike arrays in JavaScript and PHP which start at zero, this is not zero-based. If you want the 4th child in a list, it'll read li:nth-child(4).

15. element:nth-last-child(x)

li:nth-last-child(3) {
   color:blue;
}

Almost exactly the same thing as nth-child except for nth-last-child starts at the other end of the element list. For example, if you have 200 list items, and you want to style the 197th list item, li:nth-last-child(4) would style it.

16. element:first-child & element:last-child

<div>
  <article>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
  </article>
</div>

p:first-child {
   font-size:1.6em;
   color:#444;
}

p:last-child {
   font-size:1.2em;
   color:blue;
}  

This pseudo class is relatively straight forward. The :first-child selects the first child within a parent regardless of type of element. This is similar to the :first-of-type pseudo class, but it is less specific. :first-child matches the very first child element and :last-child matches the very last child element while :first-of-type matches the first occurrence of an element. 

}

Tags: ,

Comments (0)

Rated 0 out of 5 based on 0 voters
There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Rate this post:
Attachments (0 / 3)
Share Your Location
© 2019 The Code Crypt. All Rights Reserved.