CSS - Syntax to Select a Class Within an Id

CSS - Syntax to select a class within an id

#navigation .navigationLevel2 li
{
    color: #f00;
}

Select an id within another id with CSS & php query parameter

You can a descendant or direct child CSS Combinator.

#mem_message {  height: 40px;  width: 80px;}
#mem_level-1 > #mem_message { background-color: #ffbc00;}
#mem_level-2 > #mem_message { background-color: #a7a7a7;}
#mem_level-3 > #mem_message { background-color: #c78027;}

<div id="mem_level-1">   <div id="mem_message">      Level1   </div></div><br><div id="mem_level-2">   <div id="mem_message">   Level2   </div></div><br><div id="mem_level-3">   <div id="mem_message">   Level3   </div></div>

How to combine class and ID in CSS selector?

In your stylesheet:

div#content.myClass

Edit: These might help, too:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

and, per your example:

div#content.sectionA

Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass is faster than div#content.myClass because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!

How to format a class class inside an id?

Use this selector:

#footer .wrapper.clear

Note that IE6 doesn't handle multiple class selectors correctly, it treats the above as this (see here for a comparison):

#footer .clear

But in most cases this should not matter.

Styling a div with ID inside a div with specific class

IDs should only be used once, so if you followed that convention then you would simply target the ID in your selector and not concern yourself with the parent container it's in...

#id1 {
    // code
}

But because of what you're asking implies that you have an ID being used more than once, I would suggest changing this to a class before moving forward; however, if you still wanted to keep your HTML the way it is, then you need to do this...

.class1 #id1 {
    // code
}

How would I target an id within a class in LESS?

Nesting Issues and Mismatched Markup

Nesting generally indicates that a particular element will appear beneath another element, so your current code has the right idea.

Currently your nesting example would attempt to target an element with an id of "Test1" that was nested below an element with the class "Test2", which isn't the same as your markup.

If you wanted to use the same markup to target your element, consider changing your outermost .Test2 selector to .Test instead :

/* This will target an element with id "Test`" below an element with class "Test" */
.Test {
    display: block;
    #Test1 {
        width: 40px;
        height: 1000px !important;
    }
}

You can see how this is translated to CSS below :

Background Check Your Syntax

Additionally, there appears to be an issue with your .background selector that you were using. Did you mean to target an additional style below your "Test2" element like the following example?

.Test {
    display: block;
    #Test1 {
        .background{
          width: 40px;
          height: 1000px !important;
        }
    }
}

which would compile as follows :

CSS selector: first div within an id or class

If you want to select the first div within a specific class then you can use:

.class div:first-child

This however won't work when you've got the following HTML:

<div class="class">
    <h1>The title</h1>
    <div>The CSS won't affect this DIV</div>
</div>

It won't work because the div isn't the first child of the .class. If you wan't to target that div in this case I'd suggest adding another container (or adding a class to that div whatever you like :) )

---

Related Topics