How to make better CSS ID rules
Tags: html,css
Problem :
Im learning html + css and have question, it possible to write rules for several ID's, like what I have to reach my goal
<!-- language: lang-css-->
#menu-item-207 .menu-image-title {
color: black !important;
}
#menu-item-207 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-206 .menu-image-title {
color: black !important;
}
#menu-item-206 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-205 .menu-image-title {
color: black !important;
}
#menu-item-205 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-204 .menu-image-title {
color: black !important;
}
#menu-item-204 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-203 .menu-image-title {
color: black !important;
}
#menu-item-203 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-202 .menu-image-title {
color: black !important;
}
#menu-item-202 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-201 .menu-image-title {
color: black !important;
}
#menu-item-201 .menu-image-title:hover {
color: #0095d1 !important;
}
#menu-item-200 .menu-image-title {
color: black !important;
}
How can i adapt it? Thank you in advance!
Solution :
You can use comma to combine several selectors:
#menu-item-207 .menu-image-title,
#menu-item-206 .menu-image-title,
#menu-item-205 .menu-image-title,
#menu-item-204 .menu-image-title,
#menu-item-203 .menu-image-title,
#menu-item-202 .menu-image-title,
#menu-item-201 .menu-image-title,
#menu-item-200 .menu-image-title {
color: black !important;
}
#menu-item-207 .menu-image-title:hover,
#menu-item-206 .menu-image-title:hover,
#menu-item-205 .menu-image-title:hover,
#menu-item-204 .menu-image-title:hover,
#menu-item-203 .menu-image-title:hover,
#menu-item-202 .menu-image-title:hover,
#menu-item-201 .menu-image-title:hover,
#menu-item-200 .menu-image-title:hover {
color: #0095d1 !important;
}
CSS Howto..
Ok, firstly you need to put the surrounding div around the Land line element like you do with the monthly/one time fields and also make the wrappers for the monthly/one...
<div class='row'> <div class='col-md-6 '> <div class="vertical"> content</div> </div> <div class='col-md-6 '> <div class="vertical"> content</div> </div> </div> <footer>sit at bottom</footer> .vertical{ display: table-cell; vertical-align:middle;...
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is...
I don't know if this is the most efficient way, but adding reverse keyframes and toggling classes seems to work. codepen example #path1.active { animation: line 1.5s forwards; } #path1.inactive...
It's possible to do with the com.google.gwt.dom.client.Style. UIObject (so as the Widget) has the getElement() method which returns DOM Element. Try getElement() -> getStyle() -> getBorderWidth(). In the Style class...
You can use CSS transitions Here is some sample code: <style> .swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;...
I'm not aware of any good cross-browser methods to style a select box with just css, but I have had success in the past with this using jquery ui http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/...
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } img.star { -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } Add -moz-transform/animation,...
div { text-align: center; } Demo here: http://jsfiddle.net/Wc8kz/ And only one suggestion: img is self-closing tag and should be defined as <img src="..." /> or even <img src="..."> in HTML5....
One option would be to use the nth-of-type selector: .button:nth-of-type(1) { display:none; } Note: This selector is supported in IE9+, Chrome, Firefox, Safari and Opera (but not older versions of...
$date1 = new DateTime("now"); $date2 = $rows['ExpirationDate']; $difference = $date1->diff($date2); $days = $difference->d; $class = ''; if ($days <= 3) $class = 'class="expired"'; Then add the $class variable to each...
For some reason, I didn't tried the simple solution.. well it's working now :) document.getElementById("input").checked...
You need to use a different selector for each engine, unfortunately. #box::-webkit-input-placeholder { font-style: italic; } #box::-ms-input-placeholder { font-style: italic; } #box::-moz-placeholder { font-style: italic; } Here’s a demo!...
This works! And it uses class (reusable, write once and apply class where needed), which the correct way to do it. .albums { position: absolute; } .reviews { float: left;...
try this <div style="height:100px;width:100px; background-color:red; background-image:url('test.jpg'); background-size:contain; background-repeat:no-repeat; background-position:center;"></div> <div style="height:100px;width:100px; background-color:red; background-image:url('test.jpg');...
Change top: 18px; to bottom: 18px; ...
Just assign position: relative; to the div.kid-text Demo div.kid-text { background: #FFFFFF; text-align: center; width: 150px; font-size: 20px; margin-top: -100px; position: relative; z-index: 999; /* Optional */ } Also, you...
you can add width as 100%. width:100%; ...
Yes, the session would be a nice place to put it: You could create a file that is called to set the theme-session. Pass the chosen theme to that file...
I found answer after getting the help and finally understanding silly mistake of mine everything is working fine except the adblocker I disabled that and now images are displaying
The font size is not changed at all when you change font family, but the dimensions of characters will change. If this is a problem, you need to reconsider your...
Firebug's CSS panel currently doesn't offer an option to copy the URL of the webfont yet. So I created an issue, which was copied over to GitHub as issue #7320...
Can you please provide a JSFiddle of your work? Without it I can only give you the jQuery example: draggable effect. $(document).ready(function(){ $('#car').draggable(); ); I have also seen the use...
Browser security does not allow to manipulate third party iframe content via JavaScript. Adding a CSS from outside is also not possible. The only way to change the style would...
Instead, apply styling to a child element. Then use CSS to display that child element if it exists like so: .status_container { overflow: hidden; } .status_container > p { padding:...
Wrap the variables values in a span with id/class document.getElementById('countdown').innerHTML = 'Days ' + 'Hours ' + 'Minutes ' + 'Seconds </br>   <span id="days">' + days + '</span>   ...
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step. If...
you can put them in php files, header.php and footer.php and then just include them wherever you want <?php include('header.php') ?> html code <?php include('footer.php') ?>...
You can use this code of jquery. Add class to li and remove divider with css. var linkHgt = $('li').height(); $('li').each(function(){ if($(this).position().top > linkHgt){ $(this).css('padding-left','0'); $(this).prev('li').addClass('break'); return false; } });...
First, you should create gh-pages branch that special branch of GitHub. You can find and create it in setting page of you project by the button Automatic page generator. The...