I have an element with id. I try to choose some of its children via CSS selectors. #myDiv span, #myDiv i works but I wonder if there is a shorter way for this.
I've tried nested selectors like
#myDiv {
& span, i {
color: red
}
}
but didn't work.
#myDiv span, #myDiv i {
color: red
}
<div id="myDiv">
<span>My Span</span>
<p>My P</p>
<i>My I</i>
</div>
Your nested code is in SCSS not in CSS, and there is no nesting in CSS.
The shortest CSS code if you will not add any another elements under this container in future will be
#myDiv *:not(p) {
color: red
}
If you want it to be recursive (let's say, in the future, some #myDiv elements will have their own child elements), use:
#myDiv > *:not(p) {
color: red
}
You can like this:
#myDiv {
& span, & i {
color: red
}
}
it seems that you forgot to put "&" before every new class selector.
Related
I have 1 parent and 3 childs, for example:
<div class="container">
<div class="header">Header</div>
<div class="small-box-1">Small box 1</div>
<div class="main-content">Main content</div>
</div>
I need to select all the child for background: red, without affecting the parent.
Normally I can just select the child class with something like:
.header, .small-box-1, .main-content{background: red}
In sass, I can use something like this:
& > * {background: red}
So it selects all the child under the parent.
I'm wondering if we can do that just using css? so I don't need to repeat the classes to define the background: red
SASS is just a CSS pre-processor so everything you write in SASS will eventually be compiled to CSS.
With that said, if you do this in SASS:
.container {
& > * {
background: red;
}
}
it will be converted to this CSS code:
.container > * {
background: red;
}
So you should be able to use that CSS code.
Thanks,
try somethings like this :
/* Select all direct child "div" of the parent ".container" */
.container > div
{
background-color: red;
}
should try something like this:
div.container > div {
background-color: red;
}
I have a very strange behaviour of "not()" css selector.
Here my simplified code:
<div id="mapDiv" class="mapDiv mapDiv1">
pippo
<div class="gm-style">pluto</div>
</div>
<div id="mapDiv2" class="mapDiv mapDiv2">
pippo
<div class="gm-style">pluto</div>
</div>
and my css:
.mapDiv1,.mapDiv2
{
width:300px;
height:100px;
border:solid 1px red;
}
.mapDiv div
{
width:200px;
height:50px;
border:solid 1px blue;
}
:not(.mapDiv1) div
{
color:green;
}
a jsFiddle is provided here.
I would think that color:green will be applied only to second box texts, due to not() selector.... instead it is applied to both.
Can you explain me why?
As per my understandings, :not() is a negation pseudo-class.
Which means, first you select a bunch of elements and then remove elements from the selected bunch using negation pseudo-class.
Hence it should be prefixed by a selector.
If you change your css to :
div:not(.mapDiv1)
{
color:green;
}
This will select all the divs except the divs with class '.mapDiv1'
And if you change the code to:
div:not(.mapDiv1) div
{
color:green;
}
This will select all the divs within a parent div except for those parent divs with class '.mapDiv1'.
More Reference Here
you have to change your code as
div:not(.mapDiv1)
{
color:green;
}
I updated your fiddle as Fiddle
Demo
div:not(.mapDiv1) div {
color:green;
}
For more on it read
try this
div:not(.mapDiv1) {
color:green;
}
I have a class like this
.mydiv a {
color: #014BA4;
}
How can I use this class for the span element ? (Without adding/modifying the CSS file - I have no right to do)
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
A terrible solution, but desperate times call for desperate measures; If you wrap your span in an anchor tag with the href attribute set to # and then stop the default behaviour...
<div class="mydiv">
This text is #014BA4
<span>How can I use the above class</span>
</div>
You would never normally do this but if it has to be done and you absolutely can't edit your css file then it's the only way I can think of.
Try this
.mySpan,.mydiv a {
color:#014BA4;
}
<div class="mydiv">
This text is #014BA4
<span class="mySpan">How can I use the above class</span>
</div>
Update your CSS as mentioned below :
.mydiv a,.mydiv span {
color:#014BA4;
}
This will add the styles to all spans
.mydiv a, span {
color:#014BA4;
}
to add this to a particular span
.mydiv a,.mydiv span {
color:#014BA4;
}
and apply the class to the span
asdf
Try this
.mydiv a,.mydiv {
color:#014BA4;
}
just .mydiv span would do the trick
.mydiv span{
color:#014BA4;
}
Try to this
.mydiv span, .mydiv a{
color:#014BA4;
}
if you used to all element inner .mydiv than used to this css
.mydiv{
color:#014BA4;
}
This will make Each Next <span> after <a> with the same stile:
.mydiv a,
.mydiv a + span {
color: #014BA4;
}
Example: http://jsfiddle.net/verber/F8CZF/13/
JS Fiddle
Without altering the html is there any way to target the last .red class using CSS?
<div class="row">
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Target Me With CSS???</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
<div class="blue">Blue</div>
</div>
here's what I've tried :
.row > div{
display:inline-block;
padding:10px;
}
.row .red{
background-color:#770000;
color:#fff;
}
.row .red:first-child{
background-color:#440000;
color:#fff;
}
/*have tried :last-of-type too*/
.row .red:last-child{
background-color:#FF0000;
}
.row div:last-child{
background-color:#0000BB;
}
I don't believe there is a way to do that without using JS.
The closest you can get is to target the 3rd item with:
.row div:nth-child(3) {
background: chucknorris;
}
You can include a qualifier to only target the third child if it is .red like so:
.red:nth-child(3) {
background: chucknorris;
}
http://jsfiddle.net/s76J3/3/
Unfortunately, you can't do this with CSS alone. Here are a few other SO questions that are related to yours:
Using :last-child with class selector
CSS last-child selector: select last-element of specific class, not last child inside of parent?
However, if your last .red sometimes is in different positions, and you can't change the HTML at all, then you will have to rely on some light JS/jQuery.
$(function() {
$('.row .red').last().addClass('last-red-class');
});
You can use it to add another class to the last .red, and just reference that in your CSS.
http://jsfiddle.net/s76J3/2/
HTH
:last-of-type description
The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.
and syntax
element:last-of-type { style properties }
So, what really going in your example is that the browser selected the right div element but it was not the last div element of its parent; therefore, nothing was applied. To test this, change all your .red class div into a span and do the following
.row span:last-of-type{
background-color:#FF0000;
}
then you will get a working code.
http://jsfiddle.net/s76J3/4/
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.