I have the following code:
<div class="wrapper">
<div class="location info">
<h3>Location</h3>
<h3>should be no stlye</h3>
</div>
<div class="skills info">
<h3>Skills</h3>
<h3>should be no stlye</h3>
</div>
</div>
I'm trying to style the first h3 element after an info class. I thought this should work, but it dosen't:
.info:first-child {
color: color: rgb(200,50,50);
}
Why isn't this working? How should I style the first element in . info without adding extra markup in the html?
You need a space:
.info :first-child
The first-child pseudo element describes the element itself, not the children of the element. So, without the space you are selecting elements with a class of info that are the first child of their parent.
The space specifies that you are looking for descendants of .info. Since you are looking for just direct children, you should use the child combinator - >, and probably also specify only h3 elements:
.info > h3:first-child
Edit: I only noticed the problem with the selector. As mentioned in other answers (+1 to user1479606), you have a typo in your style definition as well: color: color: ... should be color: ....
You're not far away, try this:
.info > h3:first-child {
color: rgb(200,50,50);
}
But instead of using something like this, I believe the best approach would be to add a meaningful class to the first h3 - this will make reading the CSS and markup much easier in the future and it will prevent unexpected behavior when editing your markup. For example:
.info-title {
/* your styles here */
}
Your css is not correct, you only need to specify color once. You also need to make a more slightly change to your selector:
.info > h3:first-child {
color: rgb(200,50,50);
}
Demo: http://jsfiddle.net/WSZcS/
I'm trying to style the first h3 element after an info class.
.info > h3 {
color: rgb(200,50,50);
}
If your h3 tag is not the first child element you can use
.info > h3:first-of-type {
color: rgb(200,50,50);
}
Related
If I have some html like this, with only a class applied to the root. I want to access all <i> tags which are located deeper in the html.
some example html:
<div class="some-class">
<div> <!-- unknown type - could be span, div or something else -->
<i></i>
</div>
</div>
If the i tag was a direct child I could apply styling in scss like this:
> i {
color: grey
}
If I knew that the first child was always a div element i could apply styling like this:
> div > i {
color: grey
}
However I don't know the type of the first child - it could be anything.
How do I correctly apply styling to the i tag in this case ?
If it isn't possible with an dynamic solution - How can I then apply the styling to all the i tags within the root element, without styling i tags outside this element.
Specifying the root element and just leaving a space means descendant, so
.some-class i {
color: grey;
}
should do what you want.
If you want to only style them if they are at least one level deeper than the root then use * which means any tag.
.some-class * i {
color: grey;
}
Finally, if you want to target them at specifically the third level use
.some-class > * > i {
color: grey;
}
Did you try:
.some-class i {
//Your styles here
}
I have a very simple selector that works, but when adding it to a :not() it no longer seems to recognize it.
h2:not([random-attribute~="value"] h2){
color: red;
}
[random-attribute~="value"] h2{
color: blue;
}
<div class="content">
<h2>Same valid selector, not working</h2>
<div random-attribute="value">
<h2>Valid selector turned blue.</h2>
</div>
</div>
From what I understand, if you put a valid selector inside the not() you will get any h2 element that is not whatever is inside the parenthesis. This is intuitive.
What isn't intuitive, is that the selector within the not() is valid and works when used alone, but when added to the not() it doesn't seem to work.
Is this not a valid way to write this?
You need to style all h2 element that are descendants of elements that are not [random-attribute~="value"] then style h2 that are.
It doesn't hurt to qualify the selector with a direct child combinator too.
Like so:
*:not([random-attribute~="value"]) > h2 {
color: red;
}
[random-attribute~="value"] > h2 {
color: blue;
}
<div class="content">
<h2>Same valid selector, not working</h2>
<div random-attribute="value">
<h2>Valid selector turned blue.</h2>
</div>
</div>
<h2>some other heading</h2>
You have the syntax wrong for ([random-attribute~="value"] h2) It should just be ([random-attribute~="value"]). See below:
h2:not([random-attribute~="value"]){
color: red;
}
[random-attribute~="value"] h2{
color: blue;
}
<div class="content">
<h2>Same valid selector, not working</h2>
<div random-attribute="value">
<h2>Valid selector turned blue.</h2>
</div>
</div>
You are only supposed to put the given attribute in :not(), not the actual element.
In Selectors Level 3, :not only supports a simple selector argument. That will probably change in Selectors Level 4, but browsers don't support it yet.
The negation pseudo-class, :not(), is a functional pseudo-class
taking a selector list as an argument. It represents an element that
is not represented by its argument.
Note: In Selectors Level 3, only a single simple selector was allowed
as the argument to :not().
Meanwhile, you can rewrite
h2:not([random-attribute~="value"] h2)
as
:root:not([random-attribute~="value"]) > h2,
:root:not([random-attribute~="value"]) > :not([random-attribute~="value"]) > h2,
:root:not([random-attribute~="value"]) > :not([random-attribute~="value"]) > :not([random-attribute~="value"]) > h2
/* ... repeat until you get deep enough */
However, instead of using complicated selectors like that, in CSS it's more natural to let the cascade pick the most specific styles. As kristóf baján recommends, you don't even need :not:
h2 {
/* Default styles */
}
[random-attribute~="value"] h2 {
/* Overriding styles */
}
I think you are making your job a little too complicated... :)
You should just use:
[random-attribute="value"] h2{
...
}
h2 {
...
}
This should solve your problem. The reason behind the fact that it is not working as YOU would expect it to is that the selector inside the not operator is supposed to extend the clarification of the element and not its parent.
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I may have two types of html...
One:
<div>
<h4></h4><!--not to this-->
<p></p>
</div>
Two:
<div>
<h4></h4><!--this should be styled--->
<h4></h4>
<p></p>
</div>
All styling are the same but just border-bottom to h4 of first h4 tag only if it contains two h4 tags as in the example. How to do without changing html?
You can combine :first-child, :not() and :only-of-type pseudo-classes to achieve that.
Here you go:
h4:first-child:not(:only-of-type) {
background-color: gold;
}
WORKING DEMO.
This selector represents the <h4> element which is the first child of its parent whereas it's not the only of TYPE of elements in the children tree of the parent.
From the MDN:
The :only-of-type CSS pseudo-class represents any element that has
no siblings of the given type.
Let's go Crazy!
If the <h4> element is not the first child of its parent, we can select the first <h4> element and achieve the same effect by using :first-of-type pseudo-class as follows:
h4:first-of-type:not(:only-of-type) {
background-color: gold;
}
UPDATED DEMO.
For further details on :first-of-type vs :first-child you can refer my answer here.
you need to style the border-bottom of your 1st h4 only if the parent contains two adjacent headings
you could then style the border-top of the 2nd h4 and obtain the same effect
h4 + h4 {
border-top: ...
}
When you have one heading only, no style will be applied. If you have two or more adjacent headings, a border between them will be applied
This is what you need:
h4:first-child:nth-last-of-type(n+2)
{
color:green;
}
FIDDLE
You can use the First-child class.
I could look like this:
div h4:first-child{
CODE HERE
}
I think you are better off styling the second h4 if possible, as you would not be able to tell with CSS whether there are one or two h4's in the div.
You can do this with nth-child
div h4:nth-child(2) {
// your styles.
}
Fiddle
My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.
Here is an example:
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
It should be this way:
h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
This ref will give you some basic idea about the selectors and have a look at descendant selectors
h2.myClass refers to all h2 with class="myClass".
.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".
If you want the h2 in your HTML to appear blue, change the CSS to the following:
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
The element.class selector is for styling situations such as this:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.
As others have pointed out, what you're working with is descendant selectors.
h2.myClass is only valid for h2 elements which got the class myClass directly assigned.
Your want to note it like this:
.myClass h2
Which selects all children of myClass which have the tagname h2
The CSS :first-child selector allows you to target an element that is the first child element within its parent.
element:first-child { style_properties }
table:first-child { style_properties }