CODEWITHSUNDEEP
css
flasshy
flasshy

Reputation: 121

What's the name of this CSS3 syntax?

I'm asking this question because I'm trying to understand the CSS3 style changes that make this code work: Javascript CSS3: Move div container

Quick question because I don't know where else to ask...what's the below called? I want to learn more about it but not sure what it's called.

Is the "state" part of className some sort of CSS3 state...or something?

<style>
  #className {
    position: relative;
    display: inline-block;
    height: 100px;
    transition: height 1s ease;
  }

  #className.state {
    height: 25px;
  }
</style>

Upvotes: 0

Views: 59

Answers (4)

Zafar
Zafar

Reputation: 3434

This is called CSS Selectors and there is nothing specific with CSS3 in this code.

Dot (.) is class selector. You can have multiple elements with same styles, and this is where you use class names.

Hash (#) is id selector. This selector only applies to a single element. In most cases you should be avoiding to use ids for CSS selectors unless you really need it. This is just a suggestion.

One selector after another, without comma (,) selects the element inside the particular element.

In this case

#className.state

Selects all classes with name state inside the id className.

Edit

Given the HTML:

<div id="mobileMenuWrapper">
    <div class="hide">
        Content of the element            
    </div>
</div>

And the following CSS selector:

#mobileMenuWrapper.hide{
    margin-top:0px;
}

Element with the class name hide will be selected. It will take the style. Its margin from top will be 0.

However, something like this is applying multiple classes to a signle element. And it is another story. 

<div class="mobileMenuWrapper hide"></div>

Anyways, so get a better understanding of all there, you still need to read something like this or this one. At least a quick scan.

Upvotes: 2

Ian Hazzard
Ian Hazzard

Reputation: 7771

Yes, it's called a class. Classes are rules that apply to multiple elements, while ids apply only to specific elements.

A class selector looks like: .

A id selector looks like: #

An input element could have a specific Id: <input type"text" id="monthly_cost"/>

Note that no other elements can have the same id. It causes an HTML error.

For multiple elements, you use the class selector: <h1 class="blue_heading">

Hope this helps!

Upvotes: 1

Itay Radotzki
Itay Radotzki

Reputation: 857

Its called CSS Selector. You can read about it here: http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 0

user4103823
user4103823

Reputation:

It must be a class name.For example you can have an item with an Id to style only an item but you want to have some common styles with other elements

Upvotes: 1

Related Questions