I know it might sound awkward and kind of rookie, but still.
So the problem is a have a site on CMS with no acces to html source code (i know you could that, by searching for that specific .php file but it is a bit too much), and have to change some of it's elements style.
This is how that div i must modify looks like:
<div class="tg-feature-product-widget element-item uxdesign tg-column-3 portfolio "
data-category="portfolio " style="position: relative; left: 359.95px; top: px;left: 500px;"><figure><img>
blah blah blah
There is that annoying style i can't acces within F12 moreover the class can't be accessed with
.tg-feature-product-widget element-item uxdesign tg-column-3 portfolio{
in CSS (i do not exclude that i might not know how to access such complicated stuff).
So how do i change it's style?
You can access it like so: .tg-feature-product-widget.element-item.uxdesign.tg-column-3.portfolio
Thats how the CSS selectors work
<div class="element top"> //first div
</div>
<div class="element"> //second div
<div class="top"> //third div
</div>
</div>
.element.top{
//Selects the first div aka every div with the class element AND top
}
.element{
//Selects the first and second div aka every div with the class element
}
.element .top{
//Selects the third div nested in the second div aka every div with the
class top thats nested in a div with the class element
}
Related
In my code I use the service and retrieve data from the backend. I have code like this to retrieve the content.
<div class="body" *ngFor='let topic of topics | async'>
<div [innerHTML]="topic.content"></div>
</div>
This topic.content have some text and image. What I want is keep margin between this text and image. But I have no idea to do that. Can someone help me on this.
Based on your comments, if you change that inner div to:
<div class="splitter" [innerHTML]="topic.content"></div>
then you can put in styles.css (global styles, not component's css file) something like:
.splitter > img {
padding-left: 10px;
}
But I don't know how you styled the 'body' class of the parent div and if there's styling in the .content value itself, so you will need to play a bit with that .splitter class.
This is a simple question. However, I couldn't find an answer after 10 minutes search. I would like to explain my question with examples, so you can understand what I am exactly talking about.
Let's say there is a div tag with an id and it has also some text inside:
<div id="text">Hello World</div>
and I also have css rule which will turn the text into red.
.makeRed{
color: #FF0000;
}
The question is I want to make the text red in my div tag. I can simply do it like this:
<div id="text" class="makeRed">Hello World</div>
Instead of doing it, is there another way to make that text turn to red? Because if I keep adding makeRed rule to my every div that I need, it will turn my html into garbage. So I wonder if there is any way to do it clearly. I would like to use that way for "clearfix" method for some of my divs.
Whenever I need clearfix, I do like this and this is bad:
<div class="clearfix">
<div id="text">Hello World</div>
</div>
The question is: which text do you want to make red, and why?
If you want the text of all your divs red, you can just write
div{ color: red; }
If it's just for, say, an error message, I would add the class 'error' rather than 'red'. That way, you can make the HTML more semantic. You still have to add a class, but it has more meaning:
.message.error { color: red; }
You can add the ID of your div to your css like so:
.makeRed, #text{
color: #FF0000;
}
You can separate targets by commas to include multiple different elements in the style. This will maintain the styles applied to .makeRed and apply to your #text div.
I asked a similar question already, but I'm still having this problem.
The website I made has a bug on tablets. The different content sections don't display properly on tablets - things overlap. The Google Maps iframe, for instance, shows upon page load, not upon clicking on the corresponding radio button (label!). This only happens on tablets.
After some deep thinking, I found that the radio buttons are probably the culprit. On desktops everything looks A-OK.
Sorry, I can't make a JSfiddle to reproduce the tablet issue (help is explicitly sought only from those who can use dev tools, take a quick look and maybe point me to what needs to be done in order to make it work on tablets, in short only from real badass cross-browser Chucknorisses).
Help would be much, much appreciated!
UPDATE:
The radio-buttons I'm talking about are 'design-hidden' to only keep labels as visible / clickable elements.
The code looks like this (this would be the yellow 'home' button):
<div class="mx-button" id="real_button5">
<input type="radio" name="mx" id="button5" checked>
<label for="button5" onclick="" style="background-color: rgba(255,216,0,1);">HOME</label>
</div>
It seems that on tablets, these buttons are clickable (something happens), but they don't unhide the correct content. Things overlap.
As you are already using jQuery within your project I built a small example fiddle for you. Th concept behind it is the following:
All menu buttons have the class menubutton. This gives you the possibility to style the buttons but allows you additionally to use a jQuery selector on them. Further I gave each button a value attribute. This attribute represents the id of the content div which should be shown.
The content divs also have a common class content and an id correspondig to the vlaue attributes above.
<button class="menubutton" value="content1">item1</button>
<button class="menubutton" value="content2">item2</button>
<button class="menubutton" value="content3">item2</button>
<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>
Now I use CSS to hide all content divs by default:
.content {
display:none;
}
The JavaScript part is also not that complicated. I add a click-function to each element with the class menubutton. This is done with a jQuery selector. Now all content divs are selected by $(".content") and I hide them with hide().
this.value is the value attribute of the button you clicked on and is used to show this specific content div.
$('.menubutton').click( function() {
$(".content").hide();
$("#" + this.value).show();
});
I hope this shows you some of the jQuery possibilities.
UPDATE
As you want to use divs instead of buttons I made some changes on the example you can see them in this fiddle.
I changed from buttons to divs and added an id to each content div like the following:
<div class="menubutton" id="content1">item1</div>
<div class="menubutton" id="content2">item2</div>
<div class="menubutton" id="content3">item2</div>
<div class="content" id="show_content1">Content 1</div>
<div class="content" id="show_content2">Content 2</div>
<div class="content" id="show_content3">Content 3</div>
the id of content div matches the id of its navigation div plus a standard prefix. show_ in my example. The JS Code was updated to use the id, instead of the value property to find the desired content div:
$('.menubutton').click( function() {
$(".content").hide();
$("#show_" + this.id).show();
});
UPDATE II
To show one content div by default, you can add another css class to this div (see updated fiddle)
<div class="content default_content" id="show_content1">Content 1</div>
I added this corresponding class to the CSS file:
.default_content {
display:block;
}
I have css
div{margin-left:15px;}
div:hover{color:red;}
and I have multiple divs
<div>
<div>123</div>
<div>456</div>
<div>
<div>789</div>
<div>
<div>10 11 12</div>
</div>
</div>
</div>
I need that only one div became hilighted when it's under mouse pointer.
Now, when mouse is over any of these, they all become red.
Is it possible with pure CSS code?
I'm not sure why you have so many divs, if you want them indented like a list you should use ul and li but to solve your issue you could wrap all of them in a container and target the div hover within that container:
.all div:hover{color:red;}
JSFIDDLE
EDIT
Just add class names to them and target the class then
JS
Given the details the OP provided in the comments of the question I would suggest following solution:
I would add a span wrapper around every text. So the abstract function that generates the HTML would become this:
function(){
$a.="<div><span>$inc</span>"; // span tag added
if(1){
$a.=function();
}
$a.='</div>';
return $a;
}
Now the HTML output should look somewhat like this:
<div>
<div><span>123</span></div>
<div><span>456</span></div>
<div>
<div><span>789</span></div>
<div>
<div><span>10 11 12</span></div>
</div>
</div>
</div>
Which gives the possibility to style it with this CSS:
div span:hover {
color:red;
}
I have a button on my webpage. I want to use CSS pseudo-classes to make changes to a different part of the document when the cursor hovers over the button. This is what I've tried:
<div id="content">
<p id="foo">blah blah blah</p>
<p id="blah">blah blah blah</p>
</div>
<div id="navigation-panel">
Hover over a button!
<div class="buttons">
<div id="button1">button1</div>
<div id="button2">button2</div>
<div id="bar">bar</div>
</div>
</div>
And the corresponding style sheet:
#bar:hover #foo {
color: green;
}
But of course this doesn't work, because in CSS you can only use a selector of the format A B to select a B descendant of element A. With the new CSS3 spec, it's possible to select a sibling element of A using some new pseudo-classes.
But is there a way to select one (or more) elements B that are more like distant cousins to A?
I was thinking of a couple solutions. One: use Javascript. This doesn't sound too appealing to me because I'm hoping to make my page entirely functional without JS, in case there is somebody browsing my page who has JS disabled in their browser. Also I'm hoping to keep things simple. The second solution: put the foo div inside the bar div and then use position: absolute to move foo where I want it to end up. This is a messy solution, for reasons that should be obvious.
Yeah, but not with CSS. Use JavaScript. Here's a jQuery example.
$('#bar').hover(
function(e) {
$foo = $('#foo');
$foo.data('prevColor', $foo.css('color'));
$foo.css('color', 'green');
},
function(e) {
$foo = $('#foo');
$foo.css('color', $foo.data('prevColor'));
}
);
You could put it inside the container and then absolutely position it outside of the container's DOM flow to give the same effect. It's not totally ideal but it's possible:
<div id="content">
<p id="blah">blah blah blah</p>
</div>
<div id="navigation-panel">
Hover over a button!
<div class="buttons">
<div id="button1">button1</div>
<div id="button2">button2</div>
<div class="foo" id="bar">bar<p id="foo">blah blah blah</p></div>
</div>
</div>
#content {
height:80px;
}
#foo {
position:absolute;
top:40px;
}
#bar:hover #foo {
color: green;
}
http://jsfiddle.net/Uyypc/
THE “PARENT” SELECTOR
There is currently no way to select the parent of an element in CSS.
If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3
CSS 3 Selectors Spec &
CSS 2 Selectors Spec
In the meantime you'll have to resort to JavaScript if you need to select a parent element.
The CSS Selectors 4 Spec provides a syntax for defining the "subject" of a selector by using a ! sign. As of 2012, this is not available in any browser.
Using CSS4 selectors, the original question could be solved with this:
li! > a.active { /* styles to apply to the li tag */ }
MooTools has supported CSS level 4 selectors for a couple of years now - and ironically, the Slick selector engine in MooTools actually was able to process these selectors before the spec draft was even published -->How do I specify a different subject for the selector?