Title: Inheritance problem with plugin css
Last modified: August 19, 2016

---

# Inheritance problem with plugin css

 *  [selfcomposed](https://wordpress.org/support/users/selfcomposed/)
 * (@selfcomposed)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/inheritance-problem-with-plugin-css/)
 * I’m trying to get a Twitter plugin to work on my sidebar. The plugin works but
   the problem is the CSS. The link in each twitter post inherits the CSS from that
   of the rest of the sidebar. I can’t seem to figure out what I need to do to force
   it to use something else.
 * Here is what the CSS being inherited looks like:
 *     ```
       #sidebar li{
       	list-style: none;
       }
       #sidebar ul li a {
       	border-bottom: 1px dotted #666;
               color: #cc99ff;
       	display: block;
       	text-decoration: none !important;
       	margin-left: 0px;
       	padding: 4px 0px 4px 25px;
       	background-image: url('images/bull.gif');
       	background-repeat: no-repeat;
       	background-position: 10px 50%;
       	font-size: 13px;
       }
       #sidebar ul li a:hover{
       	color: #cc99ff;
       	background-color: #eeeeee;
       }
       ```
   
 * That puts a dotted underline under each link with a arrow to the left and a grey
   highlight with mouseover. I like these effects for the rest of the stuff in my
   sidebar and don’t want to change it.
 * The problem with the twitter plugins is that the link is effected. Here is what
   the html looks like that is generated by the plugin:
 *     ```
       <div id="twitt"><ul>
         <li><span class="mytwitter_tweet" id="mytwitter_tweet-1">I have a headache <i><a href="http://example.com">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-1">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-1">9 hours ago</span></li>
         <li><span class="mytwitter_tweet" id="mytwitter_tweet-2">Doing some blogging today <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-2">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-2">2 days ago</span></li>
         <li><span class="mytwitter_tweet" id="mytwitter_tweet-3">Just began my tumblr <i><a href="http://self-composed.tumblr.com/">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-3">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-3">2 days ago</span></li>
         <li><span class="mytwitter_tweet" id="mytwitter_tweet-4">Were going to look at puzzles(?). <i><a href="http://tinyurl.com/example">link</a></i></span><span class="mytwitter_separator" id="mytwitter_separator-4">&nbsp;--&nbsp;</span><span class="mytwitter_tweet_time" id="mytwitter_tweet_time-4">4 days ago</span></li>
       </ul></div>
       ```
   
 * I’ve tried things like declaring border-bottom: none; for the class. I can add
   other borders to the top or sides, but I can’t change the bottom one.
 * I also want to the link to be inline with the rest of each tweet/post/li not 
   on a seperate line.
 * Also, with the plugin I’m currently using (MyTwitter) I can make the li and ul
   tags have anything in them I want or change them altogether to something else.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Chrisber](https://wordpress.org/support/users/chrisber/)
 * (@chrisber)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/inheritance-problem-with-plugin-css/#post-852205)
 * The plugin is creating a a new div with the id of “twitt”. Reference that new
   div in your style sheet and it will be independent of anything else in the sidebar.
 *  Thread Starter [selfcomposed](https://wordpress.org/support/users/selfcomposed/)
 * (@selfcomposed)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/inheritance-problem-with-plugin-css/#post-852206)
 * That’s what I would have thought too, but it doesn’t work. It still inherits 
   the #sidebar stuff.
 * I put
 *     ```
       #twitt ul li a {
       border-bottom: 3px solid #ff0000;
       color: #00ff00;
       display: inline;
       background-image: none;
       font-size: 26px;
       }
   
       #twitt ul li a:hover {
       color: #0000ff;
       background-color: #660000;
       }
       ```
   
 * in my style sheet and it ignores it. By the way, I don’t really want all the 
   things that code does, I’m just trying things to see what it ignores and what
   it doesn’t.
 *  Anonymous User
 * (@anonymized-473288)
 * [17 years, 8 months ago](https://wordpress.org/support/topic/inheritance-problem-with-plugin-css/#post-852313)
 * Is the #twit code below or above the #sidebar code? The #twit code needs to be
   below the #sidebar code in order to override.
 * Is it in the same external stylesheet or two external stylesheets? (If yes check
   the load order)
 * You could give “li.mytwitter_tweet a” a try. Of course substituting “a” for the
   correct hyperlink css.
 * Otherwise use Fireburg in firefox. Makes it a lot easier to track it down and
   interact with the styling.
 * Hope it helps

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Inheritance problem with plugin css’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 3 replies
 * 3 participants
 * Last reply from: Anonymous User
 * Last activity: [17 years, 8 months ago](https://wordpress.org/support/topic/inheritance-problem-with-plugin-css/#post-852313)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics