Can you use a css rule as a selector? - html

Question

Let me explain:
I have multiple items with all different width's. And when I hover them it displays captions at 50% width. BUT the captions on the images at 25% are way too small.
I want to make the captions 100% width and 100% height on the ones with 25%.
Can I specify this in my css?
List of images:
.item1 {
width:100%;
float:left;
}
.item2 {
width:25%;
margin-left:50%;
margin-right:25%;
float:left;
}
.item3 {
width:50%;
margin-right:25%;
float:left;
}
.item4 {
width:25%;
float:left;
}
.item5 {
width:50%;
margin-left:50%;
float:left;
}
.item6 {
width:50%;
margin-right: 50%;
float:left;
}
posthover = my selector
.posthover {
width:50%;
height:auto;
display:none;
#post:hover .posthover {
display:block;
It must be something like this:
.posthover (only width 25%) {
width:100%
height:100%
}
#post:hover .posthover (only width 25%) {
width:100%
height:100%
}

Answer 1

Specify your own width and height in pixels
.hover:hover {
width: 100px;
height: 100px;
}

Answer 2

So you want to set the height and width to 100% only on the items that use 25%, right?
Then declare that.
.item2 {
width:25%;
margin-left:50%;
margin-right:25%;
float:left;
}
.item2:hover {
width:100%;
}

Answer 3

Can you use a css rule as a selector?
No, as great as this would be, we cannot select via CSS properties.
Here are two ways to limit your selection
Using this HTML
<ul>
<li class="item1"></li>
<li class="item2"></li><!-- Select this -->
<li class="item3"></li>
<li class="item4"></li><!-- Select this as well -->
<li class="item5"></li>
<li class="item6"></li>
</ul>
#1 - Select the awesome way:
Browser Compatibility: Browser support is pretty good (IE 9 +)
If you need broader browser support, use the second, boring example.
Use nth-child:
li:hover:nth-child(2n):nth-child(-n+4) {
width:100%;
}
Let's break down the parts:
li:hover = on li hover
:nth-child(2n) = select every second li
:nth-child(-n+4) = select only from the first four lis
Become an nth master!
Awesome Example
Hover the list item blocks
* {
margin: 0;
padding: 0;
}
li {
background: #F00;
height: 100px;
transition: all 0.3s;
}
.item1 {
width: 100%;
}
.item2 {
width: 25%;
}
.item3 {
width: 50%;
}
.item4 {
width: 25%;
}
.item5 {
width: 50%;
}
.item6 {
width: 50%;
}
li:hover:nth-child(2n):nth-child(-n+4) {
width: 100%;
}
<ul>
<li class="item1"></li>
<li class="item2"></li><!-- Select this-->
<li class="item3"></li>
<li class="item4"></li><!-- Select this as well -->
<li class="item5"></li>
<li class="item6"></li>
</ul>
#2 - Select The boring way
String the class selectors together with ,
.item2:hover,
.item4:hover {
width:100%;
}
Browser Compatibility: Everywhere.
Boring Example
Hover the list item blocks
* {
margin: 0;
padding: 0;
}
li {
background: #F00;
height: 100px;
transition: all 0.3s;
}
.item1 {
width: 100%;
}
.item2 {
width: 25%;
}
.item3 {
width: 50%;
}
.item4 {
width: 25%;
}
.item5 {
width: 50%;
}
.item6 {
width: 50%;
}
.item2:hover,
.item4:hover {
width: 100%;
}
<ul>
<li class="item1"></li>
<li class="item2"></li><!-- Select this -->
<li class="item3"></li>
<li class="item4"></li><!-- Select this as well -->
<li class="item5"></li>
<li class="item6"></li>
</ul>

Answer 4

No, there is nothing even remotely resembling the use of a CSS rule as a selector. The same applies to what you are actually asking in the question body, namely using the value of a property (somehow) in a selector. A CSS style sheet is a collection of rules that are independent of each other; they interact only in the sense that they all (potentionally) contribute to the way in which elements are rendered.
Thus, you need to analyze how your style sheets set, say, the width of something to 25% and then use the selectors in the rules identified to set up additional rules.