It's as simple as it looks like. I want to display:none; the first button. I have two of them with same parent class. For some reason I can't figure out why I don't achieve the result I want.
.main-content .cbToolBar:first-child button{
display:none;
}
<div class="main-content">
<span class="cbToolBar">
<button class="cbButton"></button>
</span>
<span class="cbToolBar">
<button class="cbButton"></button>
</span>
</div>
There is something wrong with my selection but I can't figure out what.
Thanks.
...there are other tags before but at the same level as 'cbToolBar' span, but I thought it would select the first child called 'cbToolBar'.
CSS's :first-child pseudo-class selector selects specifically the first child, regardless of it's class. The documentation on :first-child states:
Same as :nth-child(1). The :first-child pseudo-class represents an element that is the first child of some other element.
There are several workarounds. The one I'd suggest is that if your .cbToolBar elements are the only span elements within your .main-content parent, you can instead use the :first-of-type pseudo-class selector:
Same as :nth-of-type(1). The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.
.main-content .cbToolBar:first-of-type button{
display:none;
}
<div class="main-content">
<p>Hello, world!</p>
<span class="cbToolBar">
<button class="cbButton">Button 1</button>
</span>
<span class="cbToolBar">
<button class="cbButton">Button 2</button>
</span>
</div>
Or, if you know the exact position of your element you want to hide, you can always just use :nth-child(n). In this example, the element we want to hide is the second one, so we use :nth-child(2):
.main-content .cbToolBar:nth-child(2) button{
display:none;
}
<div class="main-content">
<p>Hello, world!</p>
<span class="cbToolBar">
<button class="cbButton">Button 1</button>
</span>
<span class="cbToolBar">
<button class="cbButton">Button 2</button>
</span>
</div>
You can use the general sibling combinator in this case.
Set a rule for all elements with a certain class
Use the combinator to select following siblings and unset the rule
.cbToolBar button {
display: none;
}
.cbToolBar ~ .cbToolBar button {
display: inline-block;
}
<div class="main-content">
<span>span</span>
<span class="cbToolBar">
<button class="cbButton">button</button>
</span>
<span>span</span>
<span class="cbToolBar">
<button class="cbButton">button</button>
</span>
<span>span</span>
</div>
Related
I am a beginner in html and I have problem with css button styles.
I can understand .button code
please discribe me to above code that I rounded in red colour border.
Some help from anyone know about html and css
So what you're looking at are different kinds of selectors for CSS.
They're a way of targeting different parts of your HTML.
First example
.button span {
...
}
This is possibly the most common usage of selectors, called "decedents".
.button span "means" HTML with the "button" class and has a descendant span element
So it would look like this:
.button span {
color: red
}
<button class="button">
Button Text
</button>
<button class="button">
Some text
<br />
<span>I'm Red</span>
</button>
<button>
Some text
<span>I'm not Red</span>
</button>
Second example
.button span:after uses the aforementioned descendent selector but also combines it with the "and" selector... that's the span:after part!
Any selectors written with a : before them are called "pseudo-elements". They can be from mouse events (such as :hover), or they can things like the :before or :after pseudo-elements.
.button span:hover {
color: red;
}
<button class="button">
Button Text
</button>
<button class="button">
<span>I'm Red when you hover on me</span>
<br/>
But I will never be red when you hover
</button>
<button>
<span>I'm not Red when you hover</span>
</button>
<div class="button">
<span>I will be red when you hover on me</span>
</div>
CSS can be tricky, its a big world out there!
Be sure to check out MDN Documentation or W3Schools as they have some really good interactive examples.
How do I style the nth button in this HTML:
<div class="k-klas">
<div>
<p>
<button>Inschrijven</button>
</p>
<div>
<div>
<p>
<button>Inschrijven</button>
</p>
</div>
<div>
<p>
<button>Inschrijven</button>
</p>
</div>
width this CSS:
.k-klas button:nth-child(1) {background:#f00;}
.k-klas button:nth-child(2) {background:#0f0;}
both buttons will be red...
Your HTML is not correct. You need to close the first tag of div
And you need to use nth-child() for div instead of button.
.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}
.k-klas div:nth-child(3) button {background:#000;}
<div class="k-klas">
<div>
<p>
<button>Inschrijven 1</button>
</p>
</div>
<div>
<p>
<button>Inschrijven 2</button>
</p>
</div>
<div>
<p>
<button>Inschrijven 3</button>
</p>
</div>
</div>
The best I've come up with is :
.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}
Div's you are looking not buttons.
You're not targeting the buttons properly.
The buttons are always the first child. That is to say, the first (and only) child of the p tags are the buttons.
You need to target the divs they live in, since it's those that have multiple siblings.
.k-klas div:nth-child(1) button { background:#f00; }
.k-klas div:nth-child(2) button { background:#0f0; }
Try to target the immediate child of .k-klas div.
.k-klas>div:nth-child(1) button{
background: #f00;
}
.k-klas>div:nth-child(2) button{
background: #0f0;
}
'>' selector is used to select the immediate child in css.
When button with class menu-button is clicked, div with class popover-menu is added to the DOM. When this happens, the popover-menu element becomes active.
Is there a way using CSS to add an additional class to the button whenever popover-menu is within DOM?
<div>
<button class="menu-button">
<span>Clickme</span>
</button>
<div class="popover-menu">
Menu
</div>
</div>
While there is no ability to mutate an element's classes within the context of a stylesheet, in your case the only-child pseudo-class may suffice for what you want to do here.
<style>
.menu-button:only-child {
color: pink;
}
</style>
<div>
<button class="menu-button">
<span>Clickme</span>
</button>
<div class="popover-menu">
Menu
</div>
</div>
https://codepen.io/hamzatayeb/pen/dzKyja
I have html structure like this
<div class="buttons controls">
<button>Next</button>
<button>Previous</button>
</div>
I am targetting the buttons
.controls>button
.buttons.controls>button
but it is not working. I want to know why??
Well, because your <button> element is not a child of div.controls. You could use .controls a > button or .controls > a > button
A > E
Any E element that is a child (i.e. direct descendant) of an A element
MDN Documentation - Selectors based on relationships
EDIT:
.controls > a > button is more specific. So it will only be applied when your HTML looks like this
<div class="buttons controls">
<a href='#'>
<button>MyButton</button>
</a>
</div>`
.controls a button is a more general selector, so it would also be applied with a HTML like this -
<div class="buttons controls">
<div class="myDiv">
<a href="#H">
<button>MyButton</button>
</a>
</div>
</div>
As you see, you could also specify a div as parent of <a> element and the CSS-Style will still be applied.
Because .button is inside of the anchor therefore it is not a direct descendant of the .controls class as you are trying to do in your css
try this:
.controls .button {
/* style here */
}
or like stated in the answer above
.controls > a > button {
font-size: 20px;
}
How can I choose only the first button in this code?
It's even more nested in my case, but this code is also a problem for me.
<div class="container">
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
<div class="some_class">
<span>abc</span>
<button class="btn">...</button>
</div>
</div>
You would use the :first-child pseudo class.
EXAMPLE HERE
.container .some_class:first-child button {
background:black;
}
Alternatively, assuming that the markup can be different, you might need to use something like this to ensure that the first button is selected even if .some_class isn't the first element. (example)
.container :first-child button {
background:black;
}
This will work
.container .some_class:first-child button {
/* rules here */
}
http://jsfiddle.net/cUu82/1/
you could just use .some_class:first-child button as well if these are the only ones on the page
The first-child (https://developer.mozilla.org/en/docs/Web/CSS/:first-child) will select the first some_class div which was probably your only issue