is it possible for a css rule (such as #testobject1:hover {}) to have an effect on another object #testobject2?
Nope.
The only way this could work is if #testobject2 was a descendant of #testobject1:
<div id="testobject1">
<div id="testobject2">
Hello.
</div>
</div>
The CSS would then be:
#testobject1:hover #testobject2 {
...
}
Yes, if you write something like:
#testobject1:hover, #testobject2:hover {}
or if #testobject2 is a children of the #testobject1 element and it inherits the properties declared in that CSS piece.
Otherwise, no.
It is possible if the 2nd element is a descendant of the first:
#testobject1:hover #testobject2 {}
This will cause the css of this rule to be applied to #testobject2 only when #testobject1 is hovered.
EDIT: An Interesting use of this involves absolutely positioned elements. You can have an element which is a descendant of another but visually does not appear within the other element at all. The hover will still work.
http://jsfiddle.net/F2psw/
With CSS, the only way to apply the same style to two different objects like you said is construct your style with more than one selectors. Like this:
#testobject1:hover, #testobject2 {
[...]
}
Related
I'm new into BEM methodology, and I have a question targeting a child of a modifier.
Lets say I have this HTML:
<div class="block-container">
<div class="block-container__element"></div>
</div>
At block-container I add a modifier block-container--modifier.
And the CSS would be:
.block-container {
...
}
.block-container__element {
...
}
.block-container--modifier {
...
}
And my question here is: how I can change some CSS attributes of the __element when the modifier is applied?
As far as I read, we have to avoid using nested children, but I think that sometimes that rule must be broken to achieve this kind of things, I'm right?
I'm using pure CSS, no LESS, no SASS.
In general cascades should be avoided, but not in this case.
If you are sure that the block block-container is never recursively included in another block-container, then you can do:
.block-container--modifier .block-container__element {
}
Otherwise you have to put another modifier on the element: block-container__element--modifier.
There is a third solution but it is unorthodox. In some case, I suggest to use the child selector if you are sure that, at the DOM level, the element is a direct child of the block (for example if the block always is a <ul> and the elements are the <li> children). Then you can do:
.block-container--modifier > .block-container__element {
}
I'm asking this question because I'm trying to understand the CSS3 style changes that make this code work: Javascript CSS3: Move div container
Quick question because I don't know where else to ask...what's the below called? I want to learn more about it but not sure what it's called.
Is the "state" part of className some sort of CSS3 state...or something?
<style>
#className {
position: relative;
display: inline-block;
height: 100px;
transition: height 1s ease;
}
#className.state {
height: 25px;
}
</style>
This is called CSS Selectors and there is nothing specific with CSS3 in this code.
Dot (.) is class selector. You can have multiple elements with same styles, and this is where you use class names.
Hash (#) is id selector. This selector only applies to a single element. In most cases you should be avoiding to use ids for CSS selectors unless you really need it. This is just a suggestion.
One selector after another, without comma (,) selects the element inside the particular element.
In this case
#className.state
Selects all classes with name state inside the id className.
Edit
Given the HTML:
<div id="mobileMenuWrapper">
<div class="hide">
Content of the element
</div>
</div>
And the following CSS selector:
#mobileMenuWrapper.hide{
margin-top:0px;
}
Element with the class name hide will be selected. It will take the style. Its margin from top will be 0.
However, something like this is applying multiple classes to a signle element. And it is another story.
<div class="mobileMenuWrapper hide"></div>
Anyways, so get a better understanding of all there, you still need to read something like this or this one. At least a quick scan.
It must be a class name.For example you can have an item with an Id to style only an item but you want to have some common styles with other elements
Yes, it's called a class. Classes are rules that apply to multiple elements, while ids apply only to specific elements.
A class selector looks like: .
A id selector looks like: #
An input element could have a specific Id: <input type"text" id="monthly_cost"/>
Note that no other elements can have the same id. It causes an HTML error.
For multiple elements, you use the class selector: <h1 class="blue_heading">
Hope this helps!
Its called CSS Selector.
You can read about it here: http://www.w3schools.com/cssref/css_selectors.asp
I am facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
I have some html that looks like this:
<div id="parent">
<div id="child"></div>
</div>
I want to apply a default background color to #parent except for when it contains a #child.
So the CSS should end up looking something like this:
#parent {
background: red
}
#parent:contains(#child) {
background: none
}
However, I can't get the :contains pseudo selector to work that way. Is there a way to achieve this?
:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.
Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.
For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.
With jquery
if($("#child").length>0) $("#parent").css("backgroundColor","#fff");
Its not possible with pure css.
If I have a style class defined as such:
.myclass{
//bunch of other stuff
float:left;
}
and I define another class like this:
.myclass-right{
float:right;
}
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
Using !important is one way to do it.
.myclass-right{
float:right !important;
}
In addition if you are more specific with your selector it should override as well
div.myclass-right{
float:right;
}
Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
As long as myclass-right is declared after your other class in your css file, it will work.
In case of a conflict, the css tag that comes after has a priority.
In other words - if you want some class to ever override others - just put it on end of your css file.
P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}