CODEWITHSUNDEEP
htmlcssclass
gbutters
gbutters

Reputation: 213

What does class=" " do?

What does class=" " do if there is nothing being referenced between the quotes?

It comes from the HTML of http://careers.stackoverflow.com/

<a class="" href="/cv>my profile</a>

I'm trying to figure out how to create the texture behind the grey button.

image from navigation menu careers.stackoverflow.com

Upvotes: 3

Views: 252

Answers (11)

BoltClock
BoltClock

Reputation: 723448

It means it doesn't have a class. In fact, it's equivalent to not having the class attribute at all.

That said, it may have been explicitly defined as empty because the server-side code that generates the links isn't outputting anything to the class attribute between the quotes.

I'm trying to figure out how to create the texture behind the grey button.

That's just a background image.

Upvotes: 4

Vismari
Vismari

Reputation: 745

Nothing!It doesn't matter if you put an empty value. In this case(button 'my profile') there is a css expression to cause this effect:

#header > #nav-container > ul.careers > li > a {
  /*properties like color, size, background, etc...*/
}

These '>' are used to follow an hierarchy. Example:

#div > a {
  color:blue;
  /*put your background*/    
}

causes:

<a>Nothing happens</a>
<div>
 <a>I'm blue</a>
</div>

Upvotes: 1

Scherbius.com
Scherbius.com

Reputation: 3414

it does not do anything, but all previously assigned styles stay the same.

Upvotes: 0

Jim Blackler
Jim Blackler

Reputation: 23169

It does nothing. Probably a remnant of the CMS.

Here's how Chrome sees the styles on that grey button.

  background-attachment: scroll;
  background-clip: border-box;
  background-color: #9C9C9C;
  background-image: url(http://careers.stackoverflow.com/Content/Img/header-nav-bg.png);
  background-origin: padding-box;
  border-bottom-width: 0px;
  border-left-color: #939393;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #939393;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-width: 0px;
  clear: none;
  color: white;
  cursor: pointer;
  display: inline;
  float: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 0px;
  line-height: 18px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  text-align: left;
  text-decoration: none;
  vertical-align: baseline;
  white-space: nowrap;
  width: 0px;
  zoom: 1;

Upvotes: 1

eggie5
eggie5

Reputation: 1960

They didn't make it grey from the class="". Just ignore that it might as well not even be there.

This is how it's grey:

#header > #nav-container > ul.careers > li > a {
color: white;
background: #9C9C9C url(/Content/Img/header-nav-bg.png) repeat-x;
border-right: 1px solid #939393;
border-left: 1px solid #939393;
padding: 3px 10px;
}

That translates to the link under a list item under the list with class name "careers" which is under the element of id "nav-container" which is under the element with id "header"

Upvotes: 3

steve_c
steve_c

Reputation: 6255

Setting class to an empty string applies no classes to your element.

If you want to style the button, you would need something like the following:

.stripes {
   display: block;
   padding: 2px;
   background: url(/path/to/stripy/background.gif) repeat-x 0 0;
   width: 30px;
   height: 10px;
}

And then you would apply the stripes class to the anchor element.

<a class="stripes" href="/">linky</a>

Upvotes: 1

Richard H
Richard H

Reputation: 39055

It doesn't do anything. There's no class defined. It will make no difference if you remove it, UNLESS there is javascript which relies on a class attribute being present. If so, the javascript may break on a null object.

Another possible reason for it's existence is that it's been generated by the webapp, cms or whatever.

Upvotes: 1

cmplieger
cmplieger

Reputation: 7351

it does absolutly nothing :)

they add the style by selecting the element itself like here for example:

#header > #nav-container > ul.careers > li > a {background:grey};

Upvotes: 0

Brad
Brad

Reputation: 603

Nothing.

According to chrome, the rules come from

#header > #nav-container > ul.careers > li > a {
 color: #fff;
 background: #9c9c9c url(/Content/Img/header-nav-bg.png) repeat-x;
 border-right: 1px solid #939393;
 border-left: 1px solid #939393;
 padding: 3px 10px;
}

Upvotes: 2

Van Coding
Van Coding

Reputation: 24524

It ensures that "class" is empty ;)

Upvotes: 0

Ry-
Ry-

Reputation: 224857

It probably doesn't do anything and can safely be removed, unless JavaScript relies on the className property having a non-null value all the time, which I doubt.

Upvotes: 1

Related Questions