Imagine you have a div in one of three possible states.
<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />
How can you explicitly target the #apple div only when the expand AND collapse classes are NOT present?
What I came up with is #apple :not[id$="ed"] but it's not working. Is it possible to combine both these selectors?
Note: For this scenario it's not enough to directly style #apple. The selection has to be explicitly for only when the expand and collapse classes are NOT there. The only browser that needs to be supported is a current release of Chrome.
#apple:not(.expanded):not(.collapsed)
However, it's not valid to have multiple id=apple elements. Technically, you could also do: #apple:not([class~=expanded]):not([class~=collapsed]). To be even more general, perhaps #apple:not([class])
#apple:not(.expand):not(.collapsed) will work.
Use the attribute selector [class] to target any class.
Since you want to use :not then you can do something like this
#apple:not([class]) which selects #apple only if it doesn't have any classes.
Working example:
#apple:not([class]) {
color: red;
}
<div id="apple">no class</div>
<div id="apple" class="expanded">expanded class</div>
<div id="apple" class="collapsed">collapsed class</div>
Related
So i have this situation:
<div class="wrapper">
<div class="optional">
<h3>one</h3>
<textarea/>
</div>
<div class="optional">
<h3>one</h3>
<textarea/>
</div>
</div>
inside wrapper there are more elements.
Sometimes I have 1 optional and other times more than once.
I want to add different
.optional{textarea{ height: 150px; }}
.optional:only-of-type{textarea{ height: 75px; }} //sass
but sadly this is not working (I know.. only on elements, not classes).
So - is there a way without JS to give a different height to the textarea when there is only one?
As you have stated, :only-of-type doesn't scope itself to classes.
Since CSS doesn't yet provide an analogue of *-of-type for arbitrary selector sub-matching, and additionally CSS does not provide a way to determine if an element is the only grandchild of its type (or the only grandchild, period), you will have to do this with JS.
So, I have my solution now -
Instead of div.optional I Just chose an other rare element (section), and then I can select only-of-type again.
Simple but ugly :)
Is there anyway to specify a class after a pseudo element? For example, I want to find the :last-childof the parent - and if that child has x-class, style accordingly. With SCSS, this would be relatively easier, but the project I'm working on doesn't use SASS.
Any ideas?
Here's what I was trying to do...which is obvs wrong:
form .entry-form-wrap :last-child.nested-tmpl-inner
HTML is too complex to post, but I've included a general block of code to give you an idea of the flow:
<form>
<div class="entry-form-wrap">
<div class="some-class" />
<div class="some-class" />
<div class="some-class nested-tmpl-inner" />
</div>
</form>
It's not obvs wrong. You can specify a class right after the pseudo, like :pseudo.class.
Check this fiddle: http://jsfiddle.net/fYy4T/
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.
I have a menu with links in the following form, in which I am trying to highlight the current menu item. I can't seem to get it working. Please advice as to what I am doing wrong
HTML
<body id="home">
<div id="topMenu">
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
<div id="nav-about"><p>About</p></div>
<div id="nav-rates"><p>Rates</p></div>
<div id="nav-faq"><p>FAQ</p></div>
<div id="nav-contact"><p>Contact</p></div>
<div id="nav-careers"><p>Careers</p></div>
</div>
<div id="rightTopMenu"></div>
</div>...other stuff</body>
Then for the CSS I have the following:
#home a.nav-home{ border-bottom:2px solid white; }
Do the links HAVE to be in a List, or can I leave them in div's, and if so, how can I make this work?
Thanks.
You've a little bit of a mess here.
Do the links HAVE to be in a List, or can I leave them in div's?
They don't have to be, but they probably should be. There's not good reason to use the strange markup you have chosen, you should definitely consider switching to a list and <li> tags.
Problem with duplicate ids
You have <body id="home"> and <a href="" id="home">
You also have several instances of id="topMenuBlock" (I see you fixed this in your edit.)
You cannot have more than one element with the same id. id attributes must be unique, always. Use class names instead, if anything.
You are using this selector: #home a.nav-home {} but it doesn't match anything. There is no <a class="nav-home">. You can use something like:
#home {} because that's the id of the <a> element you want
.nav-home a {} - Selects the <a> inside an element with class="nav-home"
Perhaps you have the concept of ids and classes mixed up. Ids are supposed to uniquely identify HTML elements, whereas classes can be used as many times as you like. Right now you have 6 elements with the id #topMenuBlock. You should make a .topMenuBlock class instead. I would also make a #nav-home id instead of a class since there should only be one such element on each page.
Secondly, there is no need for the <p> tags you have within your <a> tags. In fact, it's against HTML standards to do so since anchors are inline elements and paragraphs are block-level elements.
Lastly, your CSS selector that sets the border is incorrect because the .nav-home div is not contained within an <a> element. Use this CSS instead (assuming you change nav-home to be an id rather than a class):
#nav-home{ border-bottom:2px solid white; }
Fix these issues and then see what happens. If you're new to HTML and CSS, I would recommend going through some tutorials, such as the ones found at http://www.w3schools.com/.
Your class identifier should be in the <a /> tag
You have
<div class="nav-home" id="topMenuBlock"><p>Home</p></div>
but you want
<div class="something" id="topMenuBlock"><a class = "nav-home" href="" id="home"><p>Home</p></a></div>
Modify your CSS class accordingly.
What is the cleanest way to group elements that will be scattered throughout a page (i.e. they cannot all be contained within a single fieldset or other container)?
1) Use the class attribute ... (or limit using this for CSS classes?)
<div id="region1">
<p class="primary">stuff</p>
<div class="secondary">stuff</div>
</div>
stuff
<div id="region2">
<div class="secondary">stuff</div>
<div class="primary">stuff</div>
</div>
2) Use a "group" attribute ... (or avoid non-standard attributes on the elements?)
<div id="region1">
<p group="primary">stuff</p>
<div group="secondary">stuff</div>
</div>
stuff
<div id="region2">
<div group="secondary">stuff</div>
<div group="primary">stuff</div>
</div>
3) Some other way ???
Class attributes, this allows you to use the class selector, in CSS.
Class. Three reasons:
1) There's no observable semantic difference between 'group' and 'class'.
2) All browsers that can handle CSS can handle class selectors--not all can handle [group=whatever].
3) Typing [group=whatever] takes both more thought and more typing than .whatever.
Personally I prefer class statement, which is standard.
As far as you are not using css class name as data containers, they are fine.
If you need to store meta data within your elements do it with javascript.