I'm trying (and also did search here) to select a specific element without any success:
<form id="filterForm">
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="filterOption filterSection"></div>
<div class="optioncontent">
<div>
The element I'd like so select via CSS is the ver last div with the class filterOption filterSection. I tried:
.filterSection:last-of-type
.filterSection:last-child
.filterSection:last-of-type
.filterSection:last-child
Any idea on how this could be achieved? Help would be great!
Actually i don't know what you want, it's that using your half code to select specific one or select the last one? If that would be the following:
.filterOption.filterSection:nth-child(1){
background-color:yellow;
}
.filterOption.filterSection:nth-child(2){
background-color:red;
}
.filterOption.filterSection:nth-last-child(2){
background-color:grey;
}
<form id="filterForm">
<div class="filterOption filterSection">1</div>
<div class="filterOption filterSection">2</div>
<div class="filterOption filterSection">3</div>
<div class="optioncontent">
<div>
Here's http://jsfiddle.net/ianwong/p3s62rrm/
If you want to select from the strict closed code, you can click http://jsfiddle.net/ianwong/p3s62rrm/1/
Thank you all for your respond with help.
As Paulie_D mentioned it wont be flexible, but my code is dynamic (div class="filterOption filterSection") . And as Hashem Qolami wrote it's not possible.
I also tried :nth-last-child(1) as wong ian and ghorg12110 mentioned but it wont work as I have more child div's in div class="filterOption filterSection" and need to select the last parent div class="filterOption filterSection".
So I ended up adding an empty div in my php-code right at the end with the css-style I needed.
Not nice, but works for now.
You can try with the css3 property :
.filterOption.filterSection:nth-last-child(1);
You can use the :last-of-type selector as you can see in this Fiddle
So that you can select
<form id="filterForm">
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">NO</p>
<p class="filterOption filterSection">ME!</p>
<div class="blablabla"></div>
</form>
with this css
.filterOption:last-of-type { color:red }
According to the W3C there's also a :last-child selector as you can check HERE but it didn't work in JSFiddle.
Related
I don't find any clue to do that from the Semantic UI documentation/API, is there a clean way to do that?
For now, what I see is to play with :
$('.ui.accordion > .title').addClass('active')
$('.ui.accordion > .content').css('display', 'block')
You actually can do this like so:
$('.ui.accordion .individual').each(function(i){
$(this).parent().accordion('open',i);
});
You just iterate through each individual element to get its index position, then ask the parent (the accordion) to open each one. This way you still get the transition.
Here is the answer:
onOpen(commentID: string){
jQuery(`.replies${commentID}`).accordion('open', 0);
}
<div class="ui accordion replies{{commentID}}">
<div class="title" (click)="onClick(commentID);">
</div>
<div class="content">
hello
</div>
</div>
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
I have this composition :
<div class="theclass1">
<input type="checkbox" id ="1">
<div>
<div>
<div>
<label for="1">bla bla</label>
</div>
</div>
<input type="checkbox" id ="yy">
<label for ="yy">other</label>
</div>
<div class="theclass2">
<input type="checkbox" id ="2">
<div>
<div>
<div>
<label for="2">bla bla</label>
</div>
</div>
<input type="checkbox" id ="xx">
<label for ="xx">other</label>
</div>
</div>
</div>
I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'
I'm playing with first-of-type, first child, +div >div>div ,etc... without success.
Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?
I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2.
Now I have a polluted css and undesirable results.
(The div 'theclass2' is inside div theclass1.)
Thanks in advance.
problem is not the CSS only, There are serious semantics errors in your HTML
id attribute name must not start with numbers
taken from HTML4 document of w3c
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
so much nesting , why these extra parent div div and div?
now first you fix the HTML nodes then apply below css
iff you want only first label of first div class
.theclass1:first-child > label:first-of-type
working DEMO
.theclass1 > div:first-of-type > div > div > label {
color: red;
}
http://jsfiddle.net/807t5L6z/
.theclass1 label:first-child {
color:red;
}
You could use this probably similiar code for label in .theclass2
General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)
And it's better to introduce class or id for this label.
However, if you want to target it without modifying HTML, you can use this selector:
label[for='1'] {
background:red
}
.theclass1 > div > div > div label {color:red;}
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}