CODEWITHSUNDEEP
htmlcssclasscss-selectors
kingkhan kkhan
kingkhan kkhan

Reputation: 179

* selector in css not working when used with class

i am creating a website in html. I have used a ready made html contact form in it. The css of which starts like below 

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-family: Poppins-Regular, sans-serif;
}

when i inert it to my website its making my whole page misaligned, so i decided to give the properties to the form only, so i put whole form in a div and gave a class to it called starc. Now i did the following changes to css to select the whole elements in that class:

* .starc {
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

but this is not being applied to my form. Can anyone please tell me what is wrong in my code. Thanks in advance

Upvotes: 0

Views: 1613

Answers (3)

Ramesh Reddy
Ramesh Reddy

Reputation: 10652

if you just want to select an element with class "starc" then the selector would be:

.starc {

}

If you use * .starc then its the same as above because the combinator selects elements with class "starc" which are nested inside every element. So .starc and * .starc makes no difference.

On the other hand if you want to select all elements that are inside the class "starc" then the combinator would be like .starc *.

Upvotes: 1

Dejan.S
Dejan.S

Reputation: 19118

It is a common thing to use a css reset like the popular normalize. I would strongly suggest that you do it. I would then delete this rule that you got

* { ... }

Because that resets the margin and padding on all your elements on the page. The box sizing is good to have but that is covered in normalize lib.

To get to your question. If you want to reset the margins on all of your elements inside the form just reverse the asterix with the class

.starc * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

if you want for example only the direct children in the form then do this

.starc > * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

Upvotes: 2

Roland Ruul
Roland Ruul

Reputation: 1242

Asterisk(*) selects all the elements on the page. If you want to use it for the class starc, then remove asterisk (*).

More info: https://www.w3schools.com/cssref/sel_all.asp

Upvotes: 1

Related Questions