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
Related
This is in styled-components, but I think the question works fine as a simple css question.
Is there some way to add a style when the parent is hovered? I've seen the question before, but usually expecting you have the parent's class. Is there a way to do this without knowing anything about the parent in plain css? Is there such a way in styled components?
So given
<div>
<span class="inner">Hello world</span>
<div>
I want css like
.inner {
:parent:hover {
background-color: blue;
}
}
Where 'parent' is trying to reference an element with no known class.
There isn't much to make a definite specific selection so it will depend on the rest of the styling as to whether you can be specific enough.
There are a couple of ways of trying to be as specific as possible given the structure:
<div>
<span class="inner">Hello world</span>
<div>
Which to use depends on which part of the structure you are most confident defines the element you want to target - the class or the position.
div:hover > span.inner
OR
div:hover > span:nth-of-type(1)
Combining both might be what you want (I'm not sure from the question), but this is not currently possible with CSS i.e. span.inner:nth-of-type(1) does not select the first of the spans with class inner.
Result here is there isn't a way to do what I described. The solution I ended on is:
const Container = styled.div``
const Inner = style.div`
${Container}:hover & {
max-width: 200px;
transition: max-width .2s ease-in-out;
}
`
This and the other solutions are all variations of 'use knowledge of the parent to get access to it' either via class name, knowing the element type or placement, etc. None of these are wrong, but unfortunately the more general styling of 'if my parent is hovered, no matter what that parent is, do something' doesn't seem currently possible
Is it possible to write a CSS rule to select the first child of an element without a specific class?
example:
<div>
<span class="common-class ignore"></span>
<span class="common-class ignore"></span>
<span class="common-class"></span>
<span class="common-class"></span>
</div>
In this case I would like to select the first span without class ignore.
I tried this, but didn't seem to work:
.common-class:first-child:not(.ignore) {
...some rules...
}
UPDATE:
If I add a class to the parent div named parent-class, a modified version of the selector suggested by Jukka works except when the first span with class ignore comes after the first one without. The above-mentioned selector is the following:
.parent-class > .common-class.ignore + .common-class:not(.ignore) {
...some rules...
}
This question is similar to CSS selector for first element with class, except for the first element without a class. As mentioned, :first-child:not(.ignore) represents an element that is the first child of its parent and does not have the class "ignore", not the first child matching the rest of the selector.
You can use the overriding technique with a sibling combinator that I've described in my answer to the linked question, replacing the class selector with the :not() pseudo-class containing a class selector:
.common-class:not(.ignore) {
/* Every span without class .ignore, including the first */
}
.common-class:not(.ignore) ~ .common-class:not(.ignore) {
/* Revert above declarations for every such element after the first */
}
This selects all span with a .common-class and without an .ignore class.
span.common-class:not(.ignore) {
color: blue;
}
But, because we want to select only the first one, you can override the siblings that follow with the ~ selector.
span.common-class:not(.ignore) ~ span {
color: black; /* or color: inherit; */
}
jsBin demo
If you are already using jQuery, this can also be done with
$("span.common-class:not(.ignore):first").css('color', 'blue');
No, it is not possible. The selector :first-child:not(.ignore) selects an element that is the first child of its parent and does not belong to class ignore. There is no “first of class” selector and no “first not of class” selector either.
You could use the selector .ignore + :not(.ignore), but it matches any element that is not in class ignore and immediately follows an element in that class. But it matches too much, not just the first one of such elements. Depending on the markup structure, this selector might still be suitable in a particular situation, even though it is not an answer to the general question asked.
You don't have to select the div using a class. What about other css solutions like nth-child etc.? Of course, this requires the knowledge of a document structure.
in my html I have
<div id="mainNewsBody" class="news">
<a class="readMore" href="/News/Details/1">read more ...</a>
</div>
I tried to style read more ... snipper with this css
#mainNewsBody .news .readMore a{
color: #7F0609;
}
to actually apply this style I have to use !important keyword in color property.
I know that this !important keyword force to use that property but I do not understand why that is the case here, because I explicitly told to match on particular id with particular class element and inside that element to mach link.
Can someone englight me.
Thanks
Try this one:
.news .readMore {
color: #7F0609;
}
There's no need to call for id and class name for the same element.
It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)
and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)
making a total of #mainNewsBody.news a.readMore
Fiddle
EDIT
I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.
a { } for example will mess with all your links, a.news { } will only mess with a class='news'
It'd the specificity which is troubling you, the more elements class id you have in your selector, more specific your selector is.
So for example
.class a {
}
is more specific than just
a {
}
Just see to it that you do not have a more specific selector, if you've than you need to make the current one more specific or use !important declaration as you stated.
In the above snippet this is incorrect
#mainNewsBody .news .readMore a
It will search for an element having class news inside an element having an id mainNewsBody which is not true in your case so either use this
#mainNewsBody a.readMore {
/* This will be more specific than the below one
as you are using id here and not class */
color: #7F0609;
}
Or use
.news a.readMore {
color: #7F0609;
}
Ozan is right, remove the "mainNewsBody" ID from the CSS if it's not absolutely necessary.
.news .readMore a{
color: #7F0609;}
If you want to be really specific and need to include the ID in the CSS selector remove the space from in-front of ".news"
#mainNewsBody.news .readMore a{
color: #7F0609;}
CSS Tricks - Multiple Class ID Selectors
CSS rules marked !important take precedence over later rules. !important ensures that this rule has precedence.
Probably your code is generating inline css for the a element, or you have another less specific definition for a element with !important keyword somewhere else.
Inline styles have priority higher than styles defined outside the element. To overcome the inline style or a style with !important keyword by a less specific definition, you need to define it by the keyword !important and a more specific definition.
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.
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.