I was trying to use
.myDivName button:nth-child(2) {
background-color: red;
}
to select my second button in <div class="myDivName"> but it doesn't work. The code I have is -
<div class="myDivName">
<button>
1
</button>
<input type="text">
<button>
2
</button>
</div>
but I found that if I deleted the <input> in between, then nth-child would work.
How can I properly select this button using nth-child(2)? If nth-child cannot be used, what's the best way?
Thanks!
fiddle - https://jsfiddle.net/e6au4hot/9/
Use nth-of-type instead:
.hi > button:nth-of-type(2) {
background-color: red;
}
jsFiddle example
You're concerned with the type of element, not the position in the hierarchy
I have 100 buttons inside a div:
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
...
</div>
I want to style all buttons in the bootstrap style. So, I need to change everywhere < button > to < button class="btn" >. I want to do it without actually adding class="btn" 100 times for each < button > element. So, I need some CSS rule that says that all buttons inside the div are of class "btn". So, I need something like this:
.button_group button {
... add class="btn" to all elements ...
}
Is it possible at all? What is the correct syntax?
Thank you!!
HTML
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
</div>
CSS
.button_group > button {width: 100px; height: 50px;}
And the fiddle https://jsfiddle.net/049Lj4LL/4/
There is no need to ad class="btn" to every button if they are the same, just add a class to the parent div like you have class="button_group" to be able to identify that specific group of buttons. Like this https://jsfiddle.net/049Lj4LL/6/ and like this https://jsfiddle.net/049Lj4LL/7/
Assuming you have a jquery-like library, you would add a class btn to all the <button> elements like that :
$('div.button_group button').addClass('btn');
Edit: In case you are using the sass or less version of bootstrap, which I encourage you, you can try to extend the btn bootstrap class. Contrary to the javascript solution mentioned above, that won't add the class btn to the elements, but they will inherit the styles of the btn class. Here is the sass solution :
.button_group {
button {
#extend .btn;
}
}
Use javascript.
In JS, you can use the childNodes property of the div element, that you can access using document.getElementByClassName. In the array document.getElementByClassName("button_group").childNodes are initialized all the button tags written in the div. Set the class name with .className. Add the JS code to your HTML with the script tag:
<script>
for(let i=0; i<document.getElementByClassName("button_group").childNodes.length; i++){
document.getElementByClassName("button_group").childNodes[i].className="theClassNameYouDesire";
}
</script>
I have several buttons across multiple 'pages' in jQueryMobile. I'm able to change the size of all buttons using the following in my css.
.ui-btn {
height: 150px;
}
However, I only want the buttons to be this large (150px) on my first page (id='menu') and the other pages should have the default height value. I tried #menu .ui-btn {...} and adding a class bigButton and doing .bigButton .ui-btn {...} but that didn't work either.
<div data-role="page" id="menu">
<div data-role="content">
<button id="snapPic" class="bigButton" onclick="capturePhoto();">Snap picture</button>
<br/>
<button id="makeClouds" class="bigButton" onclick="location.href='makeClouds.html'">Make clouds</button>
</div>
</div>
jQuery Mobile 1.3.2 and below
Add data-role="button" to anchor tag to convert it into a button. And then apply your own styles.
Big Button
jQuery Mobile 1.4 (Beta)
For performance purposes, data-role="button" is removed now and replaced with class .ui-btn.
Big Button
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
† According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.