This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 8 years ago.
I might have been staring at the computer screen too long today and looked over something small but why can I not target these individual cells? (a1, a2, a3, etc...)
<div class="row-a">
<div class="a">
<div class="1"></div>
sdf
</div>
<div class="a">
<div class="2"></div>
</div>
<div class="a">
<div class="3"></div>
</div>
<div class="a">
<div class="4"></div>
</div>
<div class="a">
<div class="5"></div>
</div>
<div class="a">
<div class="6"></div>
</div>
<div class="a">
<div class="7"></div>
</div>
<div class="a">
<div class="8"></div>
</div>
<div class="a">
<div class="9"></div>
</div>
<div class="a">
<div class="10"></div>
</div>
</div>
CSS:
div.row-a div.a div.1 {
border: 1px solid green;
margin-left: 5px;
margin-top: 5px;
background-color:red;
height: 50px;
width: 50px;
}
jsFiddle: http://jsfiddle.net/tuHLE/
You can't begin a class name with a digit, which is why your code is not working.
See Which characters are valid in CSS class names/selectors?.
Edit: Well, ok, not exactly. Technically, you can begin a class name with a digit. In fact, you can use almost anything as a class name (except NUL). However, if you use a class name that begins with a digit, you will have to escape it in your CSS. For example, to select your class="1" div, you could do the following:
.row-a .a .\31 {...}
See http://mathiasbynens.be/notes/css-escapes for more information.
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I found something weird on using .someclass:nth-of-type(odd) or (even), no matter what I change it keeps counting from the first div (which is on the other class). Please see the example
.mktoFormCol{width:500px;}
.toggle-profile{width:100%;}
.mktoFormRow{
width: 40%;
display: inline-block;
padding: 1rem;
background-color: #7bd5f0a3;
}
fieldset.mktoFormCol .mktoFormRow:nth-of-type(odd) {
background-color: #e60951a3;
}
<fieldset class="mktoFormCol">
<div class="toggle-profile">should not count from this</div>
<div class="mktoFormRow">1 left</div>
<div class="mktoFormRow">2 right</div>
<div class="mktoFormRow">3 left</div>
<div class="mktoFormRow">4 right</div>
<div class="mktoFormRow">5 left</div>
<div class="mktoFormRow">6 right</div>
</fieldset>
<fieldset class="mktoFormCol">
<div class="mktoFormRow">1 left</div>
<div class="mktoFormRow">2 right</div>
<div class="mktoFormRow">3 left</div>
<div class="mktoFormRow">4 right</div>
<div class="mktoFormRow">5 left</div>
<div class="mktoFormRow">6 right</div>
</fieldset>
nth-of-type only works for tags
You can’t use it for classes or ids.
You’ll need to rework your html and css a little.
fieldset div:nth-of-type(odd) {
...
}
Then you’ll have to use a different tag for things you don’t want included.
<fieldset>
<div>...</div>
<div>...</div>
<footer>I’m not affected by nth-of-type because I’m not a div</footer>
</fieldset>
I think that nth-of-type looks at the tag of the element, and will not pay attention to the class. If you change this to a <p> for instance, it works.
.mktoFormCol{width:500px;}
.toggle-profile{width:100%;}
.mktoFormRow{
width: 40%;
display: inline-block;
padding: 1rem;
background-color: #7bd5f0a3;
}
fieldset.mktoFormCol .mktoFormRow:nth-of-type(odd) {
background-color: #e60951a3;
}
<fieldset class="mktoFormCol">
<p class="toggle-profile">should not count from this</p>
<div class="mktoFormRow">1 left</div>
<div class="mktoFormRow">2 right</div>
<div class="mktoFormRow">3 left</div>
<div class="mktoFormRow">4 right</div>
<div class="mktoFormRow">5 left</div>
<div class="mktoFormRow">6 right</div>
</fieldset>
<fieldset class="mktoFormCol">
<div class="mktoFormRow">1 left</div>
<div class="mktoFormRow">2 right</div>
<div class="mktoFormRow">3 left</div>
<div class="mktoFormRow">4 right</div>
<div class="mktoFormRow">5 left</div>
<div class="mktoFormRow">6 right</div>
</fieldset>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I have this html structure:
<div>
<div class="parent">
<div>
<div class="label">
<div class="xyz"></div>
</div>
</div>
</div>
<div class="parent">
<div>
<div class="label">
</div>
</div>
</div>
</div>
I want to hide the parent if it is contains div with class="xyz"
I tried that:
.parent div.xyz {
display: none;
}
but seems like my selector does not work.
You can Hide the parent element with the following jquery
jQuery('.parent').each(function(){
if (jQuery(this).find('div.xyz').length != 0) {
jQuery(this).closest('.parent').hide();
}
});
Hope it will helpful.
In css, there's no parent element selector. In your case, you can use jquery to achieve the solution.
$('.parent:has(.xyz)').addClass('hide');
.hide {
visibility: hidden;
}
div.xyz .parent {
display: none;
}
<div>
<div class="xyz">
<div class="parent">
<div>
<div class="label">
<div class="xyz"></div>
</div>
</div>
</div>
</div>
<div class="parent">
<div>
<div class="label">
</div>
</div>
</div>
</div>
You can not select an ancestor, just descendants, an example of how you could do is like this:
<div class="xyz">
<div class="parent">
<div class="label">
<div class="xyz"></div>
</div>
</div>
<div class="parent">
<div class="label">
</div>
</div>
</div>
div.xyz .parent {
display: none;
}
in this case you will hide both .parent class
See more about descending selector
to select a parent or element inside another wapper you will need to use javascript
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I'm not sure if this can be done entirely with CSS (imperative), but it's halfway working at the moment. I have this current HTML setup:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div>
<div class="image"></div>
</div>
</div>
My current CSS hides all of the child elements of ".content" that don't have a class.
.content > *:not([class]):first-child {
display:block;
}
Of the remaining 3 visible class child elements of ".content", I need to hide them all except the first child element that has the grandchild element with the ".image" class. This is the CSS I have, but it's not working:
.content > *:not([class]):not(.image):first-child {
display:block;
}
It's imposible on CSS. You tryed not show parent element by attribute of child. CSS so does not work. But you can small js for this:
document.querySelector(".image").parentNode.style.display = "block";
.content>div {
display: none;
}
<div class="content">
<div>
<div class="image">1</div>
</div>
<div class="text">2</div>
<div class="text">3</div>
<div>
<div class="button">4</div>
</div>
<div>
<div class="image">5</div>
</div>
</div>
Andrey’s answer is good, however if you don’t want to use JS I think you will need to have a class on the intermediary children as well since the entire tree to the element you want must be visible. That is, if any parent of the element you want to show is hidden then the children will be too. Something like this might do:
<div class="content">
<div>
<div class="image"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div>
<div class="button"></div>
</div>
<div class="visible">
<div class="image"></div>
</div>
</div>
.content > * {
display: none;
}
.content > .visible {
display: block;
}
I have created 3 different sets of columns, but I want the ability to style each column differently.
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
this is my current code: http://jsfiddle.net/TroyAlford/Cj6dj/2/
I want to style the featured work and news columns with top and bottom boarders and to style the type. The two Info columns along with the middle and Right columns would have full boarder around it.
Would I rename each class to a unique name to achieve this effect?
You can you the :first-child selector - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}