I have a data attribute data-modals. I would like to target this with CSS when the property has a value. I don't mind what the value is.
I can find guides for selecting when the attribute exists, or specific values, but not for 'any' value - the equivalent of '*'.
ie.
<element data-modals="" /> should not be targeted
<element data-modals="any text" /> should be targeted
You can the CSS Attribute Selector like this:
element[data-modals]:not([data-modals=""]) {
color: red;
}
Example:
p[data-modals]:not([data-modals=""]) {
color: red;
}
<p data-modals="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
<p data-modals="any text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, fugit.
</p>
Some useful links:
Documentaion of Attribute selectors: MDN
Documentaion of Attribute selectors: W3School
Documentaion of :not(): MDN
Related
I have the following division container:
<span> Lorem. </span>
<div style="display: inline-block; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
As expected, the division container acts like an inline-level element.
When I alter the value of the display property to "inline flow-root", the division container no longer acts like an inline-level element and instead acts like a block-level element:
<span> Lorem. </span>
<div style="display: inline flow-root; background-color: yellow;">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>
According to the Mozilla Developer Network documentation, the "inline-block" value should be equivalent to "inline flow-root".
Why does the two values produce different display results?
Thanks in advance.
As per the answer given in link,
display: flow-root; Needs Chrome Canary or Firefox Nightlies.
sets it to display: table; or display: block;
May be you can use overflow: visiible to contain float-ed elements.
I want to force my text to always be two lines.
If it's longer than two lines then it should have "..." at the end.
If it's shorter, then the second line should be empty.
Can this be done with CSS only?
I'm posting this again cause someone closed it as duplicate but linked a solution which isn't what I'm asking. This is the solution linked:
Limit text length to n lines using CSS
but it doesn't cover one of my cases (when the text is shorter than 2 lines)
EDIT: Here's a JSFiddle showing how in my other case it doesn't work:
https://jsfiddle.net/Lukgzefy/
<div class="cards">
<div class="card">
<div class="img"></div>
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
</div>
As you can see, the first one should occupy 2 lines (and the second should be empty) but instead it only takes one, throwing the whole thing off.
I have a problem with Foundation select menu, I found some results on google but nothing seems to work.
I'm using:
<label>Select Menu
<select>
<option value="husker">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="starbuck">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="hotdog">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
<option value="apollo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin risus. Praesent lectus.</option>
</select>
</label>
I tried to set in the css Foundation the width options for select and for the options:
select {
max-width: 100% !important;
border-radius: 0; }
select option {
max-width: 100% !important;
}
And the result is still wrong, it is somehow taking the maxim possible width of the text.
This is the resut:
I would like to build a responsive 3-columns layout. For large screens I have 3 columns, reduced to 2 for medium and to 1 for small screens. Blocks contain text, so they have different height. My goal is to create a line of blocks aligned to the top (this illustration refers to 3-columns layout but principle is valid for 2-columns too).
But my best result is the following
Pretty different, yes. I think the problem is that I am not able to create virtual "lines" of blocks, where I can align 1-2-3 and 4-5-6 to the top. Here is my code (I haven't posted it on jsfiddle because effect can be noticed better on wide screens).
HTML
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS
.span3 {
float:left;
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:left;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:31%;
margin-left:3.5%;
}
.span3:nth-child(3n+1) {
margin-left:0%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:48%;
margin-left:4%;
}
.span3:nth-child(odd) {
margin-left:0%;
}
}
#media only screen and (max-width:500px)
{
.span3 {
width:100%;
margin-left:0%;
}
}
Can anybody help? Thanks in advance.
Note I know there are tons of frameworks with this feature (like in this question), but if possible I would prefer to keep my own code.
In Bootstrap 2.x, you can do this..
<div class="row">
<div class="span4">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="clearfix"></div>
<div class="span4">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span4">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span4">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Demo: http://www.bootply.com/120857
i put a row class in each row. here is the code
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
and float it left and put margin buttom
whole code is here
http://jsfiddle.net/ndEUS/
Now its working if u use 3 times clear:both but I rly dont know why is needed use there 3x.
http://jsfiddle.net/LmPwe/
<div class="span3">
<b>ONE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>TWO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>THREE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="clear:both;"></div><div style="clear:both;"></div><div style="clear:both;"></div>
<div class="span3">
<b>FOUR</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span3">
<b>FIVE</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum risus nulla, ac tristique dolor tincidunt consequat. Nunc malesuada pharetra scelerisque.
</div>
<div class="span3">
<b>SIX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Find it out! Super simple and effective.
CSS
.span3 {
display:inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align:top;
margin-right:-4px;
border:1px solid;
}
#media only screen and (min-width:951px)
{
.span3 {
width:33.3%;
}
}
#media only screen and (min-width:501px) and (max-width:950px)
{
.span3 {
width:50%;
}
}
#media only screen and (max-width:500px)
{
.span3{
width:100%;
}
}
Hope it can help somebody.
Assume you have this HTML:
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Note that the hierarchy is flat.
Now try to select the "middle pair" of <p> elements. Is this possible? I really can't figure out how.
This selector only grabs the first <p> following the <h1>:
h1:nth-of-type(2) + p
But this selector grabs the correct pair of <p> elements plus all the following <p> elements that appear after the pair we want:
h1:nth-of-type(2) ~ p
Is it possible?
No JavaScript. No markup changing. Generic solution. Any number of <h1>s or <p>s are allowed, and the number two, in this case, is arbitrary.
I'm thinking maybe this is possible using some using the :not() selector, but I can't seem to figure it out. Kind of like selecting the "general siblings" and then excluding as necessary, or something similar.
Due to the way the general sibling combinator works, it is not possible to limit a selection of siblings to a specific range or group, even of consecutive siblings. Even the :not() selector won't be of any help here.
You will have to use JavaScript to target the right elements. jQuery's .nextUntil() method immediately springs to mind.