DEV Community

Cover image for CSS Selectors for Web developer
Md. Injamul Alam
Md. Injamul Alam

Posted on

1

CSS Selectors for Web developer

CSS selectors

1 Element Selector

h3 {
    /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

2 Id Selector

#head {
    /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

3 Class Selector

.head-title {
    /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

4 Attribute Selector

ol[type="a"] {
  /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

5 Descendant Selector

div .card-title {
   /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

6 Universal Selectors

* {
  /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

7 Nth type of Selector

div:nth-of-type(2) {
  /* write your css */ 
}
Enter fullscreen mode Exit fullscreen mode

8 Pseudo-class Selector

*The syntax of pseudo-class:*
selector:pseudo-class {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode

Example:

a:hover {
  /* write your css */
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

Retry later