CODEWITHSUNDEEP
cssstyleshtml-lists
Ashley
Ashley

Reputation: 1155

lists - can you have two styles in the same list?

A website I'm working on has a navigation bar at the top and is created using an unordered list. I need to add a Facebook button to be inline with the rest of the navigation bar but I want it to not take on the same CSS styling properties as the navigation bar (ie: the CSS properties pertaining to that particular list). Is there a way to write the code so that I can have the Facebook button inline with the navigation bar but have a different style applied to it?

Thanks!

Upvotes: 0

Views: 313

Answers (3)

seemly
seemly

Reputation: 1090

How about going against the grain?

For instance - float all li's right, making the facebook link the first menu item. Then, you can employ the use of :first-child to style up the facebook menu item and no identifier is required for the use of CSS any of the elements?

HTML:

<ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
    <li><a href="#">Menu Item 4</a></li>
    <li><a href="#">Menu Item 5</a></li>
</ul>

CSS:

* {
    padding:0;
    margin:0;
}

ul {
    float:right;
    list-style:none;
}
li {
    float:right;
    margin:0 0 0 20px;
}
li a {
    float:right;
    text-decoration:none;
    color:#000;
}
li:first-child a {
    font-weight:bold;
    color:#f00;
}

Here's an example: http://jsfiddle.net/seemly/wMWHc/

Upvotes: 0

woolm110
woolm110

Reputation: 1204

You should refrain from using !important, it's bad practice, while it works to override inherited styles, the same can be achieved by tiering your css structure to create more powerful css, read this article into how you can achieve the same without having to use the !important rule.

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

To style the facebook button differently, simple give it an id (e.g. #facebook) and use that to give it specific styles

li#facebook {
    padding: 0; 
    margin: 0;
}

This will then apply these styles only to the element that has the ID of facebook

Upvotes: 4

Giacomo1968
Giacomo1968

Reputation: 26066

Yes, you can set separate styles for the Facebook element that will override the parent CSS with the !important declaration. This site offers a good explanation.

Without your CSS it’s hard to explain how to use it, but let’s make up an example. Like this is your parent CSS styling for a specific list (li) element:

li {
  padding: 20px;
  margin 0 5px 0 5px;
  background-color: #ffc;
}

So if you want the Facebook element to not inherit the padding or background-color, set a class called #facebook and then set as follows:

li#facebook {
  padding: 0 !important;
  background-color: transparent !important;
}

That should ensure that the #facebook element gets a 0 padding and the background-color is set to transparent.

But like I said, hard to give a solid answer without your CSS so you should experiment with !important in your own setup to get the results you want.

Upvotes: 0

Related Questions