I want to select only <buttons> whose parents have display: block and exclude those <buttons> whose parents have display:none.
Is there any way to accomplish this?
Actually there's a CSS3 solution to select elements that doesn't have a display:none style, or given an explicit style property:
*:not([style*="display: none"]) button{ ... }
Demo:
*:not([style*="display: none"]) button{
color:yellow;
}
<p style="display:block">
My name is A.
<button>
a
</button>
</p>
<p style="display: none">
<button>
b
</button>
</p>
If those display styles are declared inline then you can use the following selectors: div[style*="display: none;"] (if element has inline style attribute containing "display: none;" then apply style)
Attribute Selectors:
The CSS attribute selector matches elements based on the presence
or value of a given attribute.
Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Attribute Contains Selector:
When looking to find an element based on part of an attribute value,
but not an exact match, the asterisk character, *, may be used within
the square brackets of a selector. The asterisk should fall just after
the attribute name, directly before the equals sign. Doing so denotes
that the value to follow only needs to appear, or be contained, within
the attribute value.
Src: https://learn.shayhowe.com/advanced-html-css/complex-selectors/
No.
There are no selectors which select elements based on the values of properties that apply to them.
I don't think it would be practical for CSS to introduce such a feature either. Imagine:
:has-property-value(display: none) {
display: block;
}
This is not possible with pure CSS so far,
Unless you explicitly specify the inline css to style="display: none".
You could use some javascript to filter a set of buttons that are visible.
var buttons = document.querySelectorAll('.block button');
var visibleButtons = [];
buttons.forEach(function (element) {
if (window.getComputedStyle(element.parentNode).display !== 'none') {
visibleButtons.push(element);
}
});
console.log(visibleButtons);
.block {
display: block;
}
.hidden {
display: none;
}
<div class="block">
<button>btn 1</button>
</div>
<div class="block hidden">
<button>btn 2</button>
</div>
<div class="block">
<button>btn 3</button>
</div>
There are no such selector available in CSS to select by their property values. You can try something with jquery by using :hidden selector to find buttons with display:none. Check below snippet for reference.
$( ".btnShow" ).click(function() {
$( ".btn:hidden" ).show( "fast" );
});
.hidden{
display:none;
}
.btnShow{
display:block;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button 1" class="btn">
<input type="button" value="button 2" class="btn">
<input type="button" value="button 3" class="btn hidden">
<input type="button" value="button 4" class="btn">
<input type="button" value="button 5" class="btn hidden">
<input type="button" value="button 6" class="btn">
<input type="button" value="button 7" class="btn">
<input type="button" value="Show hidden buttons" class="btnShow">
You can check with jquery. The code below means
"Get all buttons, filtered by ones whose parent is visible on page",
loop through and print html of each one.
$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible')
}).each(function(){
console.log($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="intro" style="display:block">
My name is someone.
<button> a </button> <button> b </button>
</p>
<p>I live somewhere.</p> <p>My best friend is someone.</p>
Who is your favourite:
<ul id="find" style="display:none">
<li>One</li> <li>Two</li> <li><button> x </button>
<button> y </button></li>
</ul>
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 1 year ago.
I want three buttons to each take up 33% of the assigned space. They are grouped in a class "numbers".
When I define the width for the button tags, that works fine, but when I do it for all buttons in the class that they belong to, nothing happens.
html:
<html>
<link rel="stylesheet" href="opmaak.css">
<body>
<section class="numbers">
<button type="button" value=1> 1</button>
<button type="button" value=2> 2</button>
<button type="button" value=3> 3</button><br>
</section>
</body>
</html>
css when I do it on button level:
button {
width: 33%;
}
css when I try it for all buttons of that class:
button.numbers {
width:33%;
}
Could anyone point out why that is?
button.numbers {
width: 33%;
}
<html>
<link rel="stylesheet" href="opmaak.css">
<body>
<section class="numbers">
<button type="button" value=1> 1</button>
<button type="button" value=2> 2</button>
<button type="button" value=3> 3</button><br>
</section>
</body>
</html>
This is just an issue with the CSS selector:
button.numbers {
width:33%;
}
Should be:
.numbers > button {
width:33%;
}
Each button is a direct child of the .numbers class.
The original selector button.numbers would only select button elements that had a class of numbers (i.e. <button class="numbers" ...>).
Explanation
HTML's class attribute does not inherit to children HTML tags.
Actually, only the section tag has set its class="numbers".
Fix
So you have to mind that for using a fitting CSS selector.
Either use
.numbers > button
to only match direct (first order) children of button elements within elements of class number
or use
.numbers button
to match any children of button elements within elements of class number.
Of course there are many more possibilities to specify special selection needs.
it should be
.numbers button{
width:33%;
}
button.numbers {
width:33%;
}
This css selector means apply styles to button tag which has class as numbers. It would work on this
<button class="numbers" type="button" value=1> 1</button>
Your button tag don't have class.
The selector you have given specifies the with of each button element having the numbers class. Instead, you have wanted a selector that specifies each button children of an element having a numbers class:
.numbers > button {
width: 33%;
}
<html>
<link rel="stylesheet" href="opmaak.css">
<body>
<section class="numbers">
<button type="button" value=1> 1</button>
<button type="button" value=2> 2</button>
<button type="button" value=3> 3</button><br>
</section>
</body>
</html>
I have the following code:
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
The result:
When I click on the div #question I go to an other page.
But when I click on the button I also go to the other page.
However my button is disabled...
I would like not to go to another page when I click on the button.
In Firefox when I click on the button nothing happens (This what I want).
But in Chrome I go to the other page...
Someone could help me to permanently disable the button?
I use HTML5 and Bootstrap 4
you have the button inside the div so when you click on the button you are also clicking on the div. You can also do it your way and just check to see if the event.taget is a button. if it is don't go to the url, if it isn't then go.
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
Try moving the onclick to the <button> itself rather than the surrounding <div>. The disabled attribute of the button will not be able to disable the onclick applied to its parent element.
In the two examples below I have styled it so you can see the difference between the surrounding div (In blue) and the button. Notice that the alert will only fire in the top example when clicking the div.
I am assuming that your styling means you can not see the difference between the div and button and it is left for Chrome and Firefox to decide whether you are clicking the disabled button or the div.
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
function myFunction(){
console.log(event.target.innerHTML);
if(event.target.innerHTML=='div')window.location.href='{% url ' + 'read_question' + 'question.id %}';
}
<div id="question" onclick='myFunction()' style="cursor:pointer;">
<button class="btn btn-primary" >div</button>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
If you want to keep the button in the div, you should use event.stopPropagation();. Try the following code.
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
There is also a event.stopImmediatePropagation(); method. I hope this helps you out.
The button is disabled and that works exactly as it should (prevents the default action of the button).
However, by default, click events are bubbling. Which effectively means any such event on any elements in your page does not only get triggered on that particular element, but on every one of its parents until document or until one of the elements in the chain stop the bubbling.
To stop a click event (or any other bubbling event) from bubbling you have to call stopPropagation() method on it.
In your case:
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})
...or, in jQuery:
$('#question btn').on('click', e => { e.stopPropagation() });
Now your button will not pass the click event to the div. If it's enabled it will do what you want it to, if not, it won't. The <div> won't have a clue in either case.
If you only want to cancel the bubbling when the button is disabled, change the selector from #question btn to #question btn[disabled]
This is my angular template code:
<!-- Modal -->
<ng-template #levelsmodal let-c="close" let-d="dismiss">
<div class="modal-header">
Select the levels you want to show in the table and chart
</div>
<div id="segments-modal" class="modal-body">
<div class="row margin" *ngFor="let level of config?.data?.groups; let i = index" (click)="selectLevel(level)">
<div class="colorspan" [style.backgroundColor]="level.active ? colors[i] : 'gray'" class="colorspan">
</div>
<span class="level-labels pointer-cursor" [innerHTML]="getLabel(level)" ></span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" (click)="c()">Close</button>
</div>
</ng-template>
The class "pointer-cursor" is plain simple:
.pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
The z-index was only added for trying if it could make some difference, but it doesn't. I also tried applying this class to other parts like the wrapper div and so, but it's just not working. I keep seeing the normal "text cursor" instead of the pointer one...
Does anybody know why this happens?
Try that
::ng-deep .pointer-cursor{
cursor: pointer !important;
z-index: 500;
}
Edit
The ::ng-deep combinator (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) ensures that the defined style applies to all child elements of the component, not only elements directly created by the component.
Since the element you want to style in inside a ng-template tag (so it does not belong directly to the component), you need to use this to style its elements
I've got a Bootstrap button group that has 2 buttons (JSON and XML) with JSON being active when the page is loaded. Pressing the XML button will automatically change focus to it.
Now, I'd like to attach some behavior to these buttons so that clicking the XML button hides the error-json pre element and shows the error-xml pre element.
Is there a Bootstrap-native way to accomplish this?
<div class="btn-group">
<button class="btn btn-default" autofocus="true">JSON</button>
<button class="btn btn-default">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
$("#error-xml").hide();
$(".btn").click(function () {
var id = $(this).attr("id");
if(id == "json"){
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-xml").hide();
$("#error-json").show();
}else{
$(this).attr("autofocus",true).siblings().attr("autofocus",false);
$("#error-json").hide();
$("#error-xml").show();
}
});
:focus{
outline: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn btn-default" id="json" autofocus="autofocus">JSON</button>
<button class="btn btn-default" id="xml">XML</button>
</div>
<pre id="error-json" class="hidden"><code class="language-json">{
"ErrorCode": STATUS_CODE,
"Description": ERROR_MSG
}</code></pre>
<pre id="error-xml"><code class="language-xml"><error>
<ErrorCode>STATUS_CODE</ErrorCode>
<Description>ERROR_MSG</Description>
</error>
</code></pre>
I think this can be accomplished with css dependencies. You can use the css selector #error-json + #error-xml {
/*something here*/
}
Bootstrap has pre-builtin classes to show/hide elements. You find the classes in the documentation:
http://getbootstrap.com/css/#helper-classes-show-hide
Maybe this thread helps out:
On a CSS hover event, can I change another div's styling?
Why do you dont want to use javascript/jQuery to add the desired behaviour?
Regards
I have a link styled as follows:
<style>
.addNew{
background-color: #FFF;
display: block;
margin-top: 10px;
padding: 20px;
color: #08c;
border:3px dashed #08c;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-size: 1em;
}
</style>
<a class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</a>
I am using a span-tag inside the text and a font-awesome icon.
How can I use this for an submit button? I tried this:
<input type='submit' class='addNew' value="Add new Object">
But I have no idea how to style the text of the submit button.
Use a button element.
<button class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</button>
… then you can have child elements and target them independently for styling.
You can use <button>
<button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button>
Button behaviour is different then <input type="button"> or <input type="submit">. You can append elements in <button>.
You can also use <button> tag for submit. You need to also give the button a type of submit to capture the browser event.
<button type="submit">
<a>link</a>
<span>span</span>
</button>
EDIT: Why you should specify type of submit
<form>
<input />
<button type="button">not a submit button</button>
<button type="submit">submit button</button>
</form>
In this case, anyone looking at your code will know exactly which <button> is the actually submit button in a second. Also, if someone is going to get the form's submit button with CSS selector, one can easily do so by button[type="submit"]. Yes submit is the default type, but it is also the better practice for readability and easier for debugging.