Master CSS Selectors
Tags: css, html, selectors, webdev
Published: 2020-12-25 08:51:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4vxtiaivbb2dlneeymb3.png)
# **What are CSS selectors?**
+ In CSS, selectors are patterns used to select the HTML element(s) on our web pages we want to style.
+ In layman terms, selectors are used to grab a DOM element to apply styles to it

# **What are different types of CSS selectors?**
###  **.class**
- Selects all elements with given class name
- Write a period (.) character, followed by the name of the class
- It will select all p with class="myClass"

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7jot0awoktucwxbtelv5.png)

### **child .class**
- We can target child element using a class hierarchy
- We have to write parent class name followed by a space, and then followed by the child's class
name
- Below example will add background-color: yellow to the paragraph

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ysnn376awsadeqdfkp0n.png)

### **#id**
- Style the element with given id attribute
- In below example intro is the id of the paragraph
- We select the elements by adding # followed by the id attribute of the element

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hsywzhoub3c6f9031sph.png)

### **element tag**
- We can directly select an element by its tag name and apply the styles
- In this case we don't have to mention id or the class - simply write the element name in our
styles and add properties to it
- Below example will grab all the p elements and apply the style to it

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/diga68i87p5xa7t6fhqh.png)

### **Mixture of #id, .class and element tag**
- Below example will grab all the h1 elements which have class named heading and id's as greeting and intro respectively.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4tcxkjcy0mueazlrb0yg.png)

- And it's output will look like this-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1uxotulfmztk9bb1zf0m.png)

### **adjacent selector**
- Selects only the element which is preceded by the former element
- In this case, only the first paragraph after each h1 will have gray text

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i12hi9hcg67km6ihp5mj.png)

### **attributes selector**
- Will only select the anchor tags that have a title attribute

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fhgzr8ofd62huv15a78i.png)

___

- Will style all anchor tags which link to http://www.google.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vj7ocwpxwcsypj5vmv0n.png)

___

- Star designates that the proceeding value must appear somewhere in the attribute's value
- This covers any links which consists of 'com' in them such as, google.com, gmail.com, wikipedia.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9v9feapmddqotkslkxfo.png)

___

- Attribute "contains" value
- Needs to be whole word

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26wxwh52dgfobwbt29rj.png)

___

- Attribute "contains" value
- Does not have to be whole word

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/84fpahf4xi80v0yxutwh.png)

___

+ Attribute "starts with" value
+ The value has to be a whole word
    - Either whole word
    - Or word followed by -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6qw8o020qptvouaa8esf.png)
___

- Attribute "starts with" value
- The value DOEST NOT have to be a whole word

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/60cy6aszj5n8im1sgm8l.png)

___

- Attribute "ends with" value
- The value DOEST NOT have to be a whole word

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6mgkw7qtemqcqsk2124j.png)

**If still have any doubts, do drop me a message on my [linkedin](https://www.linkedin.com/in/robin-hooda-384835120/) or [twitter](https://twitter.com/robinHoodaDev)**

Don't forget to follow me on - 
- [linkedin](https://www.linkedin.com/in/robin-hooda-384835120/)
- [twitter](https://twitter.com/robinHoodaDev)
- [github](https://github.com/robinhooda)