DEV Community

loading...

Basic CSS selectors for your toolbox

davidbell_space profile image David Bell Originally published at davidbell.space ・3 min read

Here are some ways of selecting elements. This is not a comprehensive list. Good to keep in your back pocket.

Universal Selector

Selects everything. All elements will get this colour black.

* {
   color: black;
}
Enter fullscreen mode Exit fullscreen mode

Element Selector

Selects all of an elements by the type specified.

img {
   width: 100px;
   height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Class Selector

Selects all elements or element with the class name provided.

.delete {
   color: red;
} 
.my-list {
   font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Descendant Selector

Selects all elements nested within another element you specify. In the example below all a within an li will be blue.

li a {
   color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Can be used with a class too.

.myList a {
   color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Adjacent Selector

Selects an element if the combination is correct. So say we have a h2 next to a p. We might want to colour every paragraph that comes after a h2.

<h2>Hello World</h2>
<p>Test</p>
Enter fullscreen mode Exit fullscreen mode
h2 + p {
   color: pink;
}
Enter fullscreen mode Exit fullscreen mode

Direct Child

Selects direct children elements. For example if we want to colour all paragraphs that are directly next to a div we could use.

div > p {
   color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Note it only selects directly nested not any elements that are nested further with. In the code below “Hello World” would be coloured purple but not the further nested a tag.

<div>
<p>Hello world<a href='link'>Link</a></p>
</div>
Enter fullscreen mode Exit fullscreen mode

Attribute Selector

Selects element based on their attribute. For example in a form we may have.

input[type=text'] {
  border: 2px solid black;
}
Enter fullscreen mode Exit fullscreen mode

Now all inputs that have the type text. All other input element will be left alone.

Can also be handy to know you can style boolean elements such as a checkbox.

input[checkbox] {
   height: 40px
}
Enter fullscreen mode Exit fullscreen mode

Pseudo Classes

These keywords are added to selector specifying a state of the selected element to elements.

To name a few:

  • :active
  • :checked
  • :first
  • :first-child
  • :hover
  • :not()
  • :nth-child()
  • :nth-of-type()

For example we often want to style something when we put our cursor over it. In the example below our li elements will show a border underneath and the cursor will be the pointer hand when we move our mouse over it.

Hover

li:hover {
   border-bottom: 1px solid black;
   cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Focus

Or often when using inputs you may want a style to let users know. In the example the input will revieve a border when it’s clicked and ready to be type in.

input:focus {
   border: 2px solid pink;
}
Enter fullscreen mode Exit fullscreen mode

Visited

Used for colouring links and pages that the use has visited.

a:visited {
   color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Nth Of Type

Selects a recurring element that is specified by a number and ’n’ you pass in. For example the code below will colour every 3rd paragraph.

p:nth-of-type(3n) {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

First Of Type

Selects the first element of the type. For example if you want the first li coloured red you could use the example below.

li:first-of-type {
   color: red;
}
Enter fullscreen mode Exit fullscreen mode

There is more pseudo classes but i'll leave that to you to look at if you fancy.

Pseudo Elements

A key word added to a selector for styling specific part of the element.

Examples:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

First Letter

Let’s say you want the first letter of a h1 to be larger. Like from an old book. You can use the ::first-letter selector.

h1::first-letter {
  font-size: 55px;
}
Enter fullscreen mode Exit fullscreen mode

Highlight Colour Selection

If you want to change the colour of when you click and highlight text. You can use ::selection.

Select all text highlight

::selection {
    background-color: pink;
    color: orange;
}
Enter fullscreen mode Exit fullscreen mode

Select just paragraph highlights

p::selection {
    background-color: pink;
    color: orange;
}
Enter fullscreen mode Exit fullscreen mode

::after and ::before

Used for adding cosmetic things either before or after a specified element.

a::after {
  content: "→";
}
a::before {
  content: “☀︎”;
}
Enter fullscreen mode Exit fullscreen mode

Let's connect

Twitter

Discussion

pic
Editor guide