I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
Related
Say I have a parent div with three child divs inside and I want to give each child a different background colour, can this be done with only one nth-child selector - my parent div has a class of "parent" and the three children have classes of "child1", "child2", "child3".
Thanks.
Yoy can't set 3 background-color in one selector (the 2 override by last defenition) as in image
I recommand you learn about selector in css:https://www.w3schools.com/cssref/css_selectors.asp
and more learn here(thanks to #Mosh Feu):https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
and: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
SO you have to do it as below:
.parent .child1{
background-color:red;
}
.parent .child2{
background-color:orange;
}
.parent .child3{
background-color:blue;
}
<div class="parent">
<div class="child1">one </div>
<div class="child2">tow </div>
<div class="child3">three </div>
</div>
You won't be able to do this with just one rule and just one selector.
In CSS, every rule applies a specific set of styles to all the elements that match its selector(s). This is a fundamental aspect of how CSS works. You can't have different declarations in a single rule apply selectively to specific elements — they will all just get overridden, leaving you with just one winning declaration that gets applied to all the elements that are matched. This is true even if you have multiple selectors in the same rule, and even if you use :nth-child() instead of class selectors.
For example,
.child1, .child2, .child3 {
background-color: red;
background-color: blue;
background-color: yellow;
}
is treated as
.child1, .child2, .child3 {
background-color: yellow;
}
which applies a yellow background to all three children, both despite and because of the fact that all three children are listed. The same holds true with .parent > :nth-child(1), .parent > :nth-child(2), .parent > :nth-child(3) as the selector.
Therefore, if you want to style three elements differently, you will need three rules, one for each element:
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
.child3 {
background-color: yellow;
}
Again, this is true regardless of what selector you use to actually reach each child element. The point is that each set of style declarations (property: value pairs) needs to appear in its own set of selector {} rules.
Why do you want to use nth selector if your child elements use different classes? Nth-selector should be used for elements that haven't got class selector or where the content is dynamic. In this particular case you don't need nth selector, just use
.parent .child1 {
background-color: #d3d3d3;
}
.parent .child2 {
background-color: #000;
}
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
I want to select h3 and view-grouping-header class which resides under menu-publications parent. Please see the following screenshot:
In the above image, I want to select all <h3> and 2017 or 2016 or 2015 elements. Below is the CSS:
.menu-publications h3{
background-color: red;
}
.menu-publications > .view-grouping-header{
background-color: yellow;
}
I am not able to select view-grouping-header. Please see the JS-Fiddle here.
The correct selector is .menu-publications .view-grouping-header
.menu-publications h3 {
background-color: red;
}
.menu-publications .view-grouping-header {
background-color: yellow;
}
The element > element selector is used to select elements with a specific parent. Elements that are not directly a child of the specified parent, will not br selected.
That should be
.menu-publications .view-grouping-header{
background-color: yellow;
}
without the >- it's not a direct child
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 7 years ago.
i have a hover effect for the links on my website. i want these to apply to every link EXCEPT ones in a particular div.
Example HTML
<div id="menu">
<div class="menu_item">
<a href="index.html" title="Home" target="_self">
<img src="_images/_menu/Home.png"
onmouseover="this.src='_images/_menu/homeHover.png'"
onmouseout="this.src='_images/_menu/Home.png'"
onclick="this.src='_images/_menu/homePressed.png'" alt=""/></a>
</div>
</div>
The CSS i have been trying to us
a:hover:not(.menu_item) {
background-color: #D6910E;
color: #FFE1A7;
} *no change*
a:hover:not(#menu) { *no change*
a:hover:not(#menu.menu_item) { *turns off hover on all links*
a:hover:not(#menu .menu_item) { *turns off hover on all links*
want these to apply to every link EXCEPT ones in a particular div
The standard approach to such problems in CSS is to give the general rule first, then the specific rule to override it. Using :not is a slippery slope and should be reserved for special cases. So:
/* State the general rule first */
a:hover {
background-color: #D6910E;
color: #FFE1A7;
}
/* Give the exception */
.menu_item a:hover {
background-color: transparent;
color: inherit;
}
If you do want to use :not, you have to understand that the predicate applies to the current element:
a:hover:not(#menu)
does not mean a tags being hovered which are not children of #menu; it means a tags being hovered which are not themselves #menu (which will always match). To do what you are trying to do with :not, you would want to try something like
:not(#menu) a:hover
However, this will also not work, because it means "a tags being hovered which have any ancestor which is not #menu", which will also almost always match.
Why you don't make it easier ?
Like
a:hover {
background-color:red;
color:red;
}
#menu .menu_item:hover{
/* Default color */
}
In your case , you can repair it by change the position of "hover"
a:not(.menu_item):hover {
background-color: #D6910E;
color: #FFE1A7;
} /*no change*/
a:not(#menu):hover { /*no change*/ }
a:not(#menu.menu_item) :hover { /*turns off hover on all links*/
a:not(#menu .menu_item):hover { /*turns off hover on all links*/
Hope it 'll help you
this is my code and I am going to select first child that is <span>
<div class="textTextmenu">
<img src="pic/postimage.png"/>
<span>
I need to select this span
</span>
<span>
span 2
</span>
</div>
I want to do this with first-child, but I don't know how to use first-child
Like this:
.textTextmenu span:first-child{
/*
writing code here
*/
color:red;
}
In your example, .textTextmenu span:first-child will not match anything. The first-child of .textTextmenu is an img.
You might actually want to look into first-of-type, or nth-child, e.g.
.textTextmenu span:first-of-type {}
or
.textTextmenu :nth-child(2) {}
Other approaches that would work in this particular example are + or :last-child, like so:
.textTextmenu span {
/* Style the first span */
}
.textTextmenu span + span {
/* Style the next span */
}
or
.textTextmenu span {
/* Style the first span */
}
.textTextmenu span:last-child {
/* Style the next span */
}
Here is all to make you understand
1) .textTextmenu span:first-of-type { color:red }
2) .textTextmenu :nth-child(1){border:1px solid red;}
3) .textTextmenu span:nth-child(2){color:red;}
DEMO 1
DEMO 2
DEMO 3
I'm kind of confused as to what you want but...
.textTextmenu img:first-child{
border:2px solid red;
/*How to select First child? / this way is wronge and image is not selected*/
}
right?
.textTextmenu img:first-child{
border:2px solid red;
}
this will select first img tag inside the div
any reason why you cant use first-of-type?
.textTextmenu span:first-of-type {
...styles go here...
}
NOTE: as with many CSS pseudo-selectors, first-of-type is just an alias for nth-of-type(1) just as first-child is an alias for nth-child(1)
Is this be good? It selects each span after image in textTextmenu
.textTextmenu img + span {}
To select the image, instead of:
.textTextmenu span:first-child{}
do
.textTextmenu img:first-child{}
Here is a fiddle of it in action: http://jsfiddle.net/763K9/
.textTextmenu img + span{
border:2px solid red;
/*How to select First child? / this way is wronge and image is not selected*/
}
See the demo http://jsfiddle.net/nUwDb/
I have a series of elements on my page followed by a breadcrumb . Generally, the message elements are empty and don't display, but in the rare case where one of them has content and is visible, I'd like a margin on the breadcrumb element them so it is not flush up against the message. However, I don't want to add a margin otherwise. Is there a way to do this purely with CSS? The + operator will add the margin, but it doesn't go away if the div is not displayed.
<div class="message success"></div>
<div class="message error"></div>
<div class="breadcrumb>some content</div>
.message + .breadcrumb {
margin-top: 10px; /*always there */
}
Strictly-speaking, no: CSS has no means to select an element according to its visibility. You state that the preceding element is usually empty, though, and you want to add a margin only if it has content. That being the case, then:
/* styles the .breadcrumb with a margin-top */
.message + .breadcrumb {
margin-top: 10px;
}
/* this rule is more specific, and so removes the margin-top if the .message
element is truly empty (of everything, including text-nodes and white-space) */
.message:empty + .breadcrumb {
margin-top: 0;
}
JS Fiddle demo.
The above will only work for the adjacent-siblings, if you're hoping to style the margin-top of .breadcrumb based on the existence of content in either, or both, of the .message elements, then that's a little trickier.
References:
:empty pseudo-class.
The rule have to be connected to "message error" element:
.error {
...
border-bottom: solid 1pt black;/*whatever you want*/
...
}
.error:empty {
border-bottom: none;
}