CODEWITHSUNDEEP
htmlcsscss-selectors
user2512393
user2512393

Reputation: 21

Trying to target a class in my css

I am trying to target a class in my css to move along the side so its looks like a side navigation. I cant seem to target it, i am testing it with border and moving it, but cant seem to get it. Any help would be appreciated.

here is the html 

<div class="sidebarContainer">
<div id="sidebar" class="tabbed-sidebar">
    <!-- The tabs -->
    <ul class="sidebar-tabs">
        <li id="t1" class="sidebar-tab t1"><a class="sidebar-tab t1" title="Tab 1">Tab 1</a></li>
        <li id="t2" class="sidebar-tab t2"><a class="sidebar-tab t2" title="Tab 2">Tab 2</a></li>
        <li id="t3" class="sidebar-tab t3"><a class="sidebar-tab t3" title="Tab 3">Tab 3</a></li>
        <li id="t4" class="sidebar-tab t4"><a class="sidebar-tab t4" title="Tab 4">Tab 4</a></li>
        </ul>
            <!-- tab 1 -->
            <div class="sidebar-tab-content sidebar-tab-content-t1"> <--This is what i am trying to target to go along the side of.... the sidebar-tabs                    
                <ul>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>

  <!-- tab 2 -->
  <div class="sidebar-tab-content sidebar-tab-content-t2">
      <p>what sup.</p>
  </div>

here is the css 

#sidebar >  .sidebar-tab-content sidebar-tab-content-t1 ul {
    position:relative;
    border:5px solid red;
    left:200px;
}

Upvotes: 1

Views: 180

Answers (4)

DarkAjax
DarkAjax

Reputation: 16223

Your problem is this:

#sidebar >  .sidebar-tab-content sidebar-tab-content-t1 ul {

This assumes .sidebar-tab-content is a direct child of #sidebar (because of the >) which is not the case, and also that sidebar-tab-content-t1 is a tag (instead of a class on the same element because it lacks .) and descendant of .sidebar-tab-content which is also incorrect, so try changing your selector to:

#sidebar .sidebar-tab-content.sidebar-tab-content-t1 ul {

Or:

#sidebar .sidebar-tab-content.sidebar-tab-content-t1 > ul {

Upvotes: 4

Hive7
Hive7

Reputation: 215

Remove space in class and replace it with a dash so that it now looks like this then do the same in your css

class="sidebar-tab-content-sidebar-tab-content-t1"

Upvotes: -2

Guillermo Maschwitz
Guillermo Maschwitz

Reputation: 1106

Try this:

#sidebar  div.sidebar-tab-content ul {

}

Upvotes: 0

bluetoft
bluetoft

Reputation: 5443

The problem is the > next to #sidebar. That indicates that sidebar-tab-content is the first child under the sidebar div. Remove that and you should be good

Upvotes: 0

Related Questions