CSS selector for the first element of class - html

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

Related

Change another div on hover which is not sibling nor child

My HTML code is similar to this :
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">...</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">...</p>
</div>
</div>
I'm using this in my CSS code :
.btn-1:hover {
.pro {
...
}
}
It works perfectly.
What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.
.btn-1:hover {
.pro {
... // works
}
.notpro {
... // doesn't work
}
}
Is there a way to do this ?
Thank you !
There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.
You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.
The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.
.navbar:hover + .navbar .notpro {
color: red;
}
<div class="navbar">
<div class="btn-section btn-1">
<p class="section pro">I am a Pro</p>
</div>
</div>
<div class="navbar">
<div class="btn-section btn-2">
<p class="section notpro">I am Not a Pro</p>
</div>
</div>
I don't think this syntax is valid in CSS, meaning selector inside another selector.
You can add :hover to the 'pro' to get different behaviour than the parent div.

Add css class to element if sibling div exists

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

CSS selector every element except those inside a particle class

I'm trying to select every element within a wrapper except the elements within one of the children. Consider this:
<div class="wrapper">
<div class="this">
<div class="that"></div>
</div>
<div class="foo">
<div class="bar"></div>
<div class="orange">
<div class="ignore"></div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this"></div>
</div>
</div>
</div>
What I want to do is to make the text color of everything inside wrapper white, except the elements that are inside ignore. What I got so far is .wrapper *:not(.ignore *), which doesn't work.
EDIT: I can't accept solutions that include overriding what the color is within .ignore because that color is pre-set, and is out of my control. It is also impossible to know which color is used in the pre-set. Imagine there's a body {color:blue;}, only in my case, it's impossible to know what color it is.
Add color: #fff to .wrapper
Then, add whatever color your want to .ignore
After that, make sure .ignore loads after .wrapper in your style sheet.
.wrapper {
background: #131418;
color: #fff;
font-size: 25px
}
.ignore {
color: #933
}
<div class="wrapper">
<div class="this">
<div class="that">wrapper</div>
</div>
<div class="foo">
<div class="bar">wrapper</div>
<div class="orange">
<div class="ignore">ignore</div>
</div>
</div>
<div class="hello">wrapper</div>
<div class="world">
<div class="ignore">
<div class="this">ignore</div>
</div>
</div>
</div>
If you put them in right order you can get this:
.wrapper {
background: green;
}
.wrapper *:not(.ignore) {
color: white;
}
.wrapper *, .wrapper .ignore *{
color: red;
}
<div class="wrapper">
<div class="this">
<div class="that">1</div>
</div>
<div class="foo">
<div class="bar">2</div>
<div class="orange">
<div class="ignore">3</div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this">4</div>
</div>
</div>
</div>
Note that :not(...) is applied to the current element, so you can't use :not(something [some element inside])
I'd suggest:
.wrapper div:not(.ignore) {
color: white;
}
The reason your posted CSS selector doesn't work – and shouldn't be expected to work – is because:
.wrapper *:not(.ignore *)
Is trying to select all descendent elements that are not descendants of the .ignore elements, whereas in your question it seems that you're trying to select only elements that are not themselves of the .ignore class.
Further, the :not() pseudo-class:
...is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
[Emphasis mmine, https://www.w3.org/TR/css3-selectors/#negation].
And a 'simple selector' is:
...either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
[https://www.w3.org/TR/css3-selectors/#simple-selectors-dfn]
Which appears to prevent the use of a combinator, the white-space, representing the selection of a descendant; meaning that your selector .ignore * is an invalid selector for the negation (:not()) pseudo-class.
Pure CSS doesn't seem to provide a good solution - at least not one I can think of.
The problem with not is it can only apply to "simple selectors", which basically means the selector it applies to can't contain combinators like whitespace.
For simple cases, you could do what a lot of people are suggesting - just have a second rule that selects .ignore * and undoes what your .wrapper * rule does. But if the .wrapper * rule does a lot, or if the exact state you'd get without the .wrapper * rule is unclear (maybe set by an external resource) then that isn't necessarily practical.
What you could do is use JavaScript (or similar) to propagate the .ignore class down to all of its descendants, then just use :not(.ignore)

Identify div through css

I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}

selective css (link tag) for div

Can I have a css tag on my page, that is applied selectively to some div element on that page only.
Say it has some entry like
* {
margin: 0;
}
I do not want this property to be applied on all the elements on that page.
You must assign id to the divs you want to apply css individually and seperately.
and you must assign class to a set of elements if you want to apply some css to that set collectively.
It will not apply on all elements in that page.
ID method:
#div{
margin: 0;
}
Class method:
.div{
margin: 50;
}
HTML:
<div id="div"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
If you are applying it to one specific div, but not to any others, you might as well put it in-line
<div style="margin:0"> ..... </div>
for this case you can do it
<div id="someId" style="margin:0"> </div>
If you're positive you're only going to be using it on one element, just use an inline style like other said:
<div style="margin:0;"> Your Content </div>
If you're going to be using it on more than once, make a class in CSS,
.nomargin {
margin: 0;
}
and then use it by calling that class:
<div class="nomargin"> Your Content </div>
This will ensure that you can make changes to all of these classes at once if you need to change something in the future. ALWAYS use an external style if there will be more than one element using it, it will save you so many headaches in the long run.