When using div+selector in CSS

Asked

Viewed 133 times

4

Whenever I am developing the front-end of some site, I put the name of the selector, for example .seletor1, .seletor2 and so on.

Recently I had to change the classes of a plugin I downloaded, and I saw that it: div.seletor

Forgive my ignorance, but I have six months of front-end and I’ve never used it like this.

div selectors

2 answers

5


I see two reasons why:

  1. You use the class seletor in more than one element type, and want to create a CSS rule for Divs only.

  2. You need to give more weight to this rule in the CSS cascade. For example:

    .seletor1 { color: red; }
.seletor2 { color: blue; }

    Consider a <div class="seletor1 seletor2>.... It will turn blue (both rules have the same weight, but the second rule prefers to come later in the source code). So, if you use 

    div.seletor1 { color: red; }

    will be able to force the red color on that div.

  • Got it. In your number one item, it wouldn’t be the equivalent of putting: .seletor a, seletor div, or .seletor input? You say the class will only be applied if it is within a a, div or input?

  • 1

    No, these dials are different: div.foo is a div who has the class foo, and .foo div is a div inside any element that has the class foo.

3

When preceded by "point" refers to a class and when preceded by sharp, the famous "#" refers to an id.

Class should always be used when you want to define properties for a group of elements and id for a single element.

When you define div.classe {} you can define properties for this class exclusively in this div.

Browser other questions tagged div selectors

You are not signed in. Login or sign up in order to post.